Getting nested divs inline and level with each other - html

Question

Essentially I have several divs and I'm trying to align them so that they stay in line with each other regardless of the size of the window. I have a dropdown bar (testRegion) and I have a large textarea where users can input SSNS (SSNinput). Much of the rest of the page, on the righthand should be a table that displays the results.
I apologize, I don't have access to it at the moment, so I can't really show you how I'd like it to look, even with a screenshot. But essentially the height of testRegion, SSNinput, and the buttons below, should equal the height of the table on the righthand side. The table is being created successfully at the bottom of the code here. (maintbl).
<div class="pageContent row col-lg-12" style="white-space:nowrap; width:1200px;" >
<div class="col-lg-2" style="width: 245px; display:inline-block; white-space:nowrap;">
<div class="row" style="white-space:nowrap; display:inline-block; width:245px;">
<select class=" btn btn-default dropdown-toggle" id="testRegion" data-toggle="dropdown" style="width:235px">
<option value="a">Acceptance</option>
<option value="i">Integration</option>
</select>
</div>
<div class="row" style="padding-top: 8px; border: dotted; white-space:nowrap; width:245px;">
<textarea id="SSNinput" rows="21" class="form-control" placeholder="Paste/Import SSNS Here" style="width: 235px; display: inline-block;"></textarea>
</div>
<div id="navbuttons" style="float: left; white-space: nowrap; padding-top: 10px; width:245px;">
<button id="Validate" title="Validate" class="glyphicon glyphicon-play" onclick="getParticipantPlans();"></button>
<button id="Import" title="Import" class="glyphicon glyphicon-log-in"></button>
<button id="Export" title="Export" class="glyphicon glyphicon-log-out" onclick="ExportToExcel();"></button>
<button id="Clear" title="Clear" class="glyphicon glyphicon-repeat" onclick="ClearArea();"></button>
</div>
</div>
<div id='jqxWidget' class ="col-lg-8" style="font-size: 13px; font-family: Verdana; display: inline-block; width:800px; ">
<div id="maintbl"></div> <!--table created here successfully.-->
</div>
</div>
I'm sorry I can't provide a better description for you all. Essentially the behavior now, is that the SSNinput and testRegion divs get all out of whack and not level with the table. I've tried a bunch of container divs, and setting whitespace to nowrap. Nothing seems to work. Any guidance here would be appreciated. Thanks.
EDIT
Here's the attached CSS I'm using.
#nav {
padding-right: 10px;
resize: none;
max-width: 230px;
min-width: 230px;
float: left;
}
#thead {
color: white;
background-color: #0c98cf;
font-family: Arial;
width: 100%;
text-align: center;
border-radius: 10px;
}
#maintbl td {
text-align: center;
}
#title-wrapper {
background-color: #086387;
}
#import {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
padding-left: 12px;
color: white;
}
#clear {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
padding-left: 12px;
color: white;
text-align: center;
}
#export {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
border-radius: 6px;
padding-left: 12px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
#validate {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
color: white;
}
#validate:hover {
color: white;
background-color: #808080;
}
#export:hover {
color: white;
background-color: #808080;
}
#import:hover {
color: white;
background-color: #808080;
}
#clear:hover {
color: white;
background-color: #808080;
}
#SSNinput {
resize: none;
border-radius: 0px;
overflow-y: auto;
display: inline-block;
border-radius: 9px;
}
/*drop area for importing in popup window*/
#drop {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 15pt bold, "Vollkorn";
color: #bbb;
}