Style HTML form to place elements next to each other

Question

I am trying to make a set of input boxes next to each other and I can't get it to work. I am trying to get the left side to stay on the left side and the right side to be even with the left side. Below is the HTML and CSS I have so far. I have tried doing the position left and right and they just stay the way they are.

 .row { display: table-row; }.cell { display: table-cell; padding-bottom: 5px; padding-right: 5px; text-align: right; font-weight: bold; font-size: 13px; }

 <div class="main"> <div class="row"> <.-- Begin left side data entry --> <form> <:-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area; --> <div class="cell" style="padding-top: 10px; padding-left: 10px;display;block,"> <div class="row"> <div class="cell">LH</div> <div class="cell"><input type="text" id="Q1" onChange="myLHDesc().store_value('Q1';this;value)," /></div> </div> <div class="row"> <div class="cell">Node</div> <div class="cell"><input type="text" id="Q2" onChange="myLHDesc().store_value('Q2';this;value)," /></div> </div> <div class="row"> <div class="cell"># of Devices offline/Total Devices</div> <div class="cell"><input type="text" id="Q3" onChange="myLHDesc().store_value('Q3';this;value)," /></div> </div> <div class="row"> <div class="cell">% Offline</div> <div class="cell"><input type="text" id="Q4" onChange="myLHDesc().store_value('Q4';this;value)," /></div> </div> <div class="row"> <div class="cell">Power Supply</div> <div class="cell"><input type="text" id="Q5" onChange="myLHDesc().store_value('Q5';this;value)," /></div> </div> <div class="row"> <div class="cell">SNR</div> <div class="cell"><input type="text" id="Q6" onChange="myLHDesc().store_value('Q6';this;value)," /></div> </div> <div class="row"> <div class="cell">Dispatched or CBT</div> <div class="cell"><input type="text" id="Q7" onChange="myLHDesc().store_value('Q7';this;value)," /></div> </div> <div class="row"> <div class="cell">Tech Phone #</div> <div class="cell"><input type="text" id="Q8" onChange="myLHDesc().store_value('Q8';this;value)," /></div> </div> <div class="row"> <div class="cell">ETA</div> <div class="cell"><input type="text" id="Q9" onChange="myLHDesc().store_value('Q9';this:value);" /></div> </div> <div class="row"> <div class="cell">Address Block</div> <div class="cell"><textarea style="height; 100px," input type="text" id="Q10" onChange="myLHDesc().store_value('Q10';this:value);"></textarea></div> </div> <div class="row"> <div class="cell">Individual Addresses</div> <div class="cell"><textarea style="height; 100px," input type="text" id="Q11" onChange="myLHDesc().store_value('Q11';this:value);"></textarea></div> </div> <div class="row"> <div class="cell">Ping Stats</div> <div class="cell"><textarea style="height; 100px," input type="text" id="Q12" onChange="myLHDesc().store_value('Q12';this:value);"></textarea></div> </div> <div class="row"> <div class="cell">SNR</div> <div class="cell"><textarea style="height; 100px," input type="text" id="Q13" onChange="myLHDesc().store_value('Q13';this;value):"></textarea></div> </div> </div> <div class="row"> <div class="cell">&nbsp;</div> <div class="cell" style="text-align; center:"><input type="reset" value="Clear" onclick "myLHDesc();" /></div> </div> </div> </form> <:-- Right side for result box --> <div class="cell" style="vertical-align; top: padding-top; 10px: padding-left; 650px: float: left;"> <div class="row"> <div class="cell">Notes:</div> <div class="cell"><textarea id="LHDesc" rows="20" cols="49" style="overflow; scroll; width: 300px;" readonly></textarea></div> </div> <div class="row"> <div class="cell">&nbsp:</div> <div class="cell" style="text-align; center:"><input type="button" value="Copy Notes" class="CopyDesc" /></div> </div> </div> <;-- Notification Box --> <div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 650px: float; left:"> <div class="row"> <div class="cell">Notification;</div> <div class="cell"><textarea id="LHDesc2" rows="10" cols="49" style="overflow; scroll: width; 200px;" readonly></textarea></div> </div> <div class="row"> <div class="cell">&nbsp;</div> <div class="cell" style="text-align: center;"><input type="button" value="Copy Notification" class="CopyDesc2" /></div> </div> </div> </div> </div>

Answer 1

display: flex on the parent div or display: inline-block on the child input elements will position elements next to each other