How to modify the layout of the Configurable List using CSS

Hello, would you be able to provide CSS script to so we can get the configurable list widget to display Student's First Name and Student's Last Name fields on a different row to Student's University Email and Students' Student Number? The link to the form is: https://form.jotform.com/240152486568967 

Hi there,

Thank you for reaching out to Jotform Support. We can set up the Configurable List to look like this:

This is a 2-step process; first, we need to switch the form's theme to the new one. Then, inject CSS code into the widget.

To switch the form's theme, click on the Switch to the New Theme button found in the upper-right side of the Form Builder as you can see below:

To inject CSS code into the widget, follow the steps below:

1. In Form Builder, click on the Configurable List widget and then on its wand icon
2. Click on the Custom CSS tab
3. In the CSS editor, insert/paste the code below and click on Update Widget

/* Create a 2 column layout */

.configurable-list-field-wrapper {

flex-basis: calc(50% - 8px) !important;

}

You can also view this sample form.

Reach out again if you need any other help.