How do I put input fields into 2 columns?

Question

I have a form which currently is all in one column, I would like it to be split into 2 columns.

I have tried adding div classes, but the form is still only one column, I do not want to do any changes to the current form itself. I would just like to be able to split it into 2 columns.

I would also not like the current CSS effects that I have on the fields to change..

 $yellow:#f5ba1a; $black:#000000; $grey:#cccccc; .form-style-1{ font-family: Verdana, Geneva, sans-serif; font-size: 0.em; width: 40em; padding: 1em; border: 1px solid #cbc9c9; overflow:auto; resize:both; } .form-style-1 fieldset{ border-radius:none; background-color:#ebebeb; padding:5px; border:1px solid #cbc9c9; width:450px; margin:auto; box-shadow: 1px 2px 5px rgba(0,0,0,.31); -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); } .form__field { display: block; } [class*="--checkbox"] { display: inline-block; } [data-conditional] { display: none; } #flight:checked ~ [data-conditional*="flight"] { display: block; } #hotel:checked ~ [data-conditional*="hotel"] { display: block; } #transfer:checked ~ [data-conditional*="travel"] { display: block; } input[type="text"] { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="date"] { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } textarea { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } select { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 35px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="time"] { display:block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); box-shadow: 1px 2px 5px rgba(0,0,0,.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } h1 { font-size: 32px; font-weight: 300; color: #4c4c4c; text-align: center; padding-top: 10px; margin-bottom: 10px; } a.button { font-size: 14px; font-weight: 600; color: white; padding: 6px 25px 0px 20px; margin: 10px 8px 20px 0px; display: inline-block; float: right; text-decoration: none; width: 50px; height: 27px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #3a57af; -webkit-box-shadow: 0 3px rgba(58,87,175,.75); -moz-box-shadow: 0 3px rgba(58,87,175,.75); box-shadow: 0 3px rgba(58,87,175,.75); transition: all 0.1s linear 0s; top: 0px; position: relative; } a.button:hover { top: 3px; background-color:#2e458b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } p { color:black; }

 <div class="form-style-1"> <h1>Travel Registration Form</h1> <form action="" method="POST"> <input name="orgid" type="hidden" value="00D8E000000DW9t" /> <input name="retURL" type="hidden" value="http://" /> <fieldset> <h3> Select Travel</h3> <input class="form__input form__input--checkbox" data-input="00N8E000002AjRq" id="flight" type="checkbox" /> <label class="form__field form__field--checkbox" for="flight"> <span class="form__label">Flight</span> </label> <input class="form__input form__input--checkbox" id="hotel" type="checkbox" /> <label class="form__field form__field--checkbox" for="hotel"> <span class="form__label">Hotel</span> </label> <input class="form__input form__input--checkbox" id="transfer" type="checkbox" /> <label class="form__field form__field--checkbox" for="transfer"> <span class="form__label">Transfer </span> </label> <!--Above is the checkboxes code --> <p class="form__field form__field--text" data-conditional="flight hotel travel"> <span class="form__input">Traveler's Information </span></p> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="name"><span class="form__label">Traveler Name </span><input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> </label><br> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="email">Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label><br /> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="phone">Phone<input class="form__input" id="phone" maxlength="40" name="phone" size="20" type="text" /></label><br /> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="subject">Subject<input class="form__input" id="subject" maxlength="80" name="subject" size="20" type="text" /></label><br /> <label class="form__field form__field--text" data-conditional="flight hotel travel" for="description">Description<textarea class="form__input" name="description"></textarea></label><br />

Answer 1

If I have understood correctly then try wrapping your labels and input fields in divs and then set those to inline blocks?

HTML:

   <div class="form-input">
        <label class="form__field form__field--text" data-conditional="flight hotel travel" for="name">
            <span class="form__label">Traveler Name</span>
            <input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> 
        </label>
    </div>

CSS:

.form-input {
   display: inline-block;
}

Answer 2

Made use of CSS grid to get the two columns.

 $yellow: #f5ba1a; $black: #000000; $grey: #cccccc; .form-style-1 { font-family: Verdana, Geneva, sans-serif; font-size: 0em; width: 40em; padding: 1em; border: 1px solid #cbc9c9; overflow: auto; resize: both; } .form-style-1 fieldset { border-radius: none; background-color: #ebebeb; padding: 5px; border: 1px solid #cbc9c9; width: 450px; margin: auto; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31); -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31); } .form__field { display: block; } [class*="--checkbox"] { display: inline-block; } [data-conditional] { display: none; } #flight:checked ~ [data-conditional*="flight"] { display: grid; grid-template-columns: auto auto; } #hotel:checked ~ [data-conditional*="hotel"] { display: grid; grid-template-columns: auto auto; } #transfer:checked ~ [data-conditional*="travel"] { display: grid; grid-template-columns: auto auto; } input[type="text"] { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="date"] { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } textarea { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } select { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 35px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } input[type="time"] { display: block; width: 50%; padding: 8px 10px 9px 35px; height: 25px; box-sizing: border-box; outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09); border: solid 1px #cbc9c9; -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; } h1 { font-size: 32px; font-weight: 300; color: #4c4c4c; text-align: center; padding-top: 10px; margin-bottom: 10px; } a.button { font-size: 14px; font-weight: 600; color: white; padding: 6px 25px 0px 20px; margin: 10px 8px 20px 0px; display: inline-block; float: right; text-decoration: none; width: 50px; height: 27px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #3a57af; -webkit-box-shadow: 0 3px rgba(58, 87, 175, 0.75); -moz-box-shadow: 0 3px rgba(58, 87, 175, 0.75); box-shadow: 0 3px rgba(58, 87, 175, 0.75); transition: all 0.1s linear 0s; top: 0px; position: relative; } a.button:hover { top: 3px; background-color: #2e458b; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } p { color: black; }

 <body> <div class="form-style-1"> <h1>Travel Registration Form</h1> <form action="" method="POST"> <input name="orgid" type="hidden" value="00D8E000000DW9t" /> <input name="retURL" type="hidden" value="http://" /> <fieldset> <h3> Select Travel </h3> <input class="form__input form__input--checkbox" data-input="00N8E000002AjRq" id="flight" type="checkbox" /> <label class="form__field form__field--checkbox" for="flight"> <span class="form__label">Flight</span> </label> <input class="form__input form__input--checkbox" id="hotel" type="checkbox" /> <label class="form__field form__field--checkbox" for="hotel"> <span class="form__label">Hotel</span> </label> <input class="form__input form__input--checkbox" id="transfer" type="checkbox" /> <label class="form__field form__field--checkbox" for="transfer"> <span class="form__label">Transfer </span> </label> <!--Above is the checkboxes code --> <p class="form__field form__field--text" data-conditional="flight hotel travel" > <span class="form__input">Traveler's Information </span> </p> <div data-conditional="flight hotel travel"> <label class="form__field--text" for="name" ><span class="form__label">Traveler Name </span ><input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> </label> <label class="form__field--text" for="email" >Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label> <label class="form__field--text" for="phone" >Phone<input class="form__input" id="phone" maxlength="40" name="phone" size="20" type="text" /></label> <label class="form__field--text" for="subject" >Subject<input class="form__input" id="subject" maxlength="80" name="subject" size="20" type="text" /></label> <label class="form__field--text" for="description" >Description<textarea class="form__input" name="description" ></textarea ></label> </div> </fieldset> </form> </div> </body>

You could now decrease the width of inputs or increase the width of form-style-1 to achieve a more elegant design.