Two Items Beside Each Other in a Form

What does this code do?

This code snippet will allow you to float two elements beside each other in a form.

Code Snippets

This code snippet assumes you have 5 fields. The first, third, and forth fields are full width. The second and third field are beside each other.

Copy and paste this code into Design > Custom CSS

#COLLECTIONID {
  .field-list {
    display: flex;
    flex-wrap: wrap;
  }

  /* These will be Full Width*/
  .form-item:nth-child(1), .form-item:nth-child(4), .form-item:nth-child(5) {
    width: 100% !important;
  }

  /* These Will Be Beside Each Other */
  /* LEFT */
  .form-item:nth-child(2) {
    width: 48% !important;
    margin-right: 4%;
  }

  /* RIGHT */
  .form-item:nth-child(3) {
    width: 48% !important;
  }
}

Then change the 1, 2, 3, 4, or 5 to represent the elements you want beside each other. If you have more then, add “.form-item:nth-child(1)” to one of the rows separated by a “ , “.

How To Use It

1. Copy and paste the code as indicated above.

2. Change the 1, 2, 3, 4, or 5 to represent the elements you want beside each other.

3. If you have more then, add “.form-item:nth-child(1)” to one of the rows separated by a “ , “.