Not able to split the div for rows and columns - html

Question

creating this application in MVC5 with bootstrap....
I have added div :
<div class="divFullWidth" style="margin:10px 0px 0px -15px; height:150px;background-color:grey;">
<div class="wireframe_div">
<div class="Row">
<div class="Cell">
#Html.Label("Ext :")
</div>
</div>
<div class="Row">
<div class="Cell">
#Html.TextBox("txt_Ext", null, new { #class = "form-control" })
</div>
</div>
</div>
</div>
CSS :
.wireframe_div {
border: 1px solid black;
background-color: darkgrey;
padding: 15px 20px 25px 20px;
.Cell
{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
}
.Row
{
display: table-row;
}
.divFullWidth {
float: left;
width: 100%;
}
But am not able split the div exactly like in screen shot.
Can any one help on this. Am very new to web tech.

Answer 1

<div style="width: 100%; height: 150px;">
<div style=" width: 100%; height: 30%;">
Ext <input type="text" style="width: 35%;"/>
Area <input type="text" style="width: 10%;"/>
</div>
<div style="width: 50%; height: 70%; float: left; text-align: center;">
Activity Catagory <input type="text" style="width: 80%;"/>
</div>
<div style="width: 50%; height: 70%; float: right;">
<div style="width: 50%; height: 100%; float: right; text-align: center;">
Activity Date To<input type="text" style="width: 80%;"/>
</div>
<div style="width: 50%; height: 100%; float: left; text-align: center;">
Activity Date From <input type="text" style="width: 80%;"/>
</div>
</div>
</div>
also try bootstrap it makes life easy