UPDATE: See the current layout in this JFiddle based on feedback received from others, still a few tweaks needed.
In my setup, there are 12 divs housed within one container div. These 12 divs consist of 6 text components and 6 corresponding input fields.
This is how I envision the structure...
[Text1 Input Item1 Text2 Input Item2 Text3 Input Item3]
[Text4 Input Item4 Text5 Input Item5 Text6 Input Item6]
How can I achieve this desired layout using CSS? Whenever I attempt it, the boxes get misaligned and end up in wrong rows. Any assistance with this would be greatly appreciated.
<div class="container">
<div class="text1"></div>
<div class="InputItem1"></div>
<div class="text2"></div>
<div class="InputItem2"></div>
<div class="text3"></div>
<div class="InputItem3"></div>
<div class="text4"></div>
<div class="InputItem4"></div>
<div class="text5"></div>
<div class="InputItem5"></div>
<div class="text6"></div>
<div class="InputItem6"></div>
</div>
CSS code:
.container{width:100%;}
.text1{width:15%;float:left}
.InputItem1{width:15%;float:left}
.text2{width:15%;float:center}
.InputItem2{width:15%;float:center}
.text3{width:15%;float:right}
.InputItem3{width:15%;float:right}
.text4{width:15%;float:left}
.InputItem4{width:15%;float:left}
.text5{width:15%;float:center}
.InputItem5{width:15%;float:center}
.text6{width:15%;float:right}
.InputItem6{width:15%;float:right}