Почему я не могу разместить 2 входа рядом

Question

Я пытаюсь сделать базовый дизайн в модальном диалоговом окне jquery, но пока это большой провал. Я никогда не был хорош в CSS, и мне это кажется очень сложным. Вот то, что я пробовал до сих пор:

Модальное поле HTML:

   <div class="screenSection">
        <div class="sectionHeader">
            <p>features</p>
        </div>
        <div class="lines">
           <div class="formElement">
               <label>overhaul</label>
               <input type="text" name="overhaul" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>included in the next installment</label>
               <input type="text" name="includedNI" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>first revision</label>
               <input type="text" name="firstRevision" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>last revision/ последно преразглеждане</label>
               <input type="text" name="interestFrequency" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label> frequency ofcollection/</label>           
               <select name="frequencyOfCol" id="frequencyOfCol" data-bind="value: editName" style="width: 4em;">               
                    <option>1</option> 
                    <option>2</option>  
                    <option>3</option>      
                    <option>6</option>  
                </select> 
           </div>           
        </div>
    </div>

И CSS:

@CHARSET "UTF-8";

.formElement { height: 30px; float: left; height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; }
.formElement label { width: 17.89em; margin: 0.8em 0 0.1em 0.15em; font-size: 1.7em; display: block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { float: left; border: 1px solid #CCCCCC; padding: 0.2em; height: 1.6em; width: 29.4em; }
fileSelection { width: 50em; height: 30px; }
td
{
    background: #A9D0F5;
    text-align: center;
    height:2em;
}
th
{
    height:2em;
}
table
{
    width: 98%;
    font-size: 1.2em;
    clear: both;
}

Полный Jsfiddle здесь

Пожалуйста, помогите мне разместить входы рядом. Я потерял более 3 часов на эту проблему уже. Я уверен, что мне не хватает чего-то действительно маленького, но, как новичок, я не могу это обнаружить.

Answer 1

Обновленный css

.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label { font-size: 10px; width: 100%; min-width: 150px; display: inline-block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 15px; width: 150px }
fileSelection { width: 50em; height: 30px; }

jsfiddle

Answer 2

Установите равную ширину для двух div.... которые плавают влево....

Answer 3

Для DIVS, которые вы хотите поместить рядом, укажите ширину (менее 50%) и поплавок: влево. Например:.formElement { float:left; width:40%;}

Answer 4

В вашем CSS удалите text-align:center; и изменить

<td align="center">
    <button data-bind="click: $root.editProduct">Edit</button>
</td>

в

<td align="right">
    <button data-bind="click: $root.editProduct">Edit</button>
</td>

А также

<td align="center">
    <button data-bind="click: $root.removeProduct">Delete</button>
</td>

в

<td align="left">
    <button data-bind="click: $root.removeProduct">Delete</button>
</td>