Div fill vertical space of wrapper and margins - html

Question

I am trying to create two div, one at left with 49% width, then 2% margin and then another div at 49% width as well. But I have a problem with the vertical space, as well as with the margin.
DEMO
.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
margin-top:0;
margin-right: 2%;
background-color: pink;
}
.Footer-firstElementRight {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
Foo bar
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>
Here is a fiddle of that code: https://jsfiddle.net/L6k5ocyr/3/
I think I am missing something, any idea?

Answer 1

.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
margin-top:0;
margin-right: 2%;
background-color: pink;
float:left; /* edited */
}
.Footer-firstElementRight {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
Foo bar
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>
try this :
.Footer-firstElementLeft {
float: left;
}

Answer 2

.Footer-firstElementLeft {
vertical-align: top;
}
Try this.
.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
margin-top:0;
margin-right: 2%;
background-color: pink;
vertical-align: top; /* edited */
}
.Footer-firstElementRight {
display: inline-block;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
Foo bar
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>

Answer 3

try using the float property see snippet
.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
font-size: 16px;
line-height: 20px;
width: 49%;
float: left;
height: 100%;
margin-right: 2%;
background-color: pink;
}
.Footer-firstElementRight {
font-size: 16px;
line-height: 20px;
width: 49%;
float: right;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
Foo bar
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>

Answer 4

I would recommend reading up on flexbox when wanting to do stuff like this.
I edited your fiddle to show what flexbox can do.
.Footer-firstElement {
display: flex;
justify-content: space-between;
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElement > * {
flex: 0;
min-width: 49%;
}
.Footer-firstElementLeft {
font-size: 16px;
line-height: 20px;
height: 100%;
background-color: pink;
}
.Footer-firstElementRight {
font-size: 16px;
line-height: 20px;
height: 100%;
padding: 0;
background-color: gold;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
Foo bar
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>

Answer 5

Not change much, just adding display flex to the parents and flex:1; to the children.
.Footer-firstElement {
height: 200px;
width:100%;
position:relative;
background-color: tomato;
display: flex;
}
.Footer-firstElementLeft {
flex:1;
font-size: 16px;
width: 50%;
height: 100%;
background-color: pink;
margin-right: 8;
}
.Footer-firstElementRight {
flex:1;
font-size: 16px;
width: 50%;
height: 100%;
background-color: gold;
margin-left: 8px;
}
<div class="Footer-firstElement">
<div class="Footer-firstElementLeft">
Foo bar
</div>
<div class="Footer-firstElementRight">
Foo bar <br />
Foo bar
</div>
</div>

Answer 6

Try this case
.Footer-firstElement {
font-size: 0;
line-height: 0;
height: 200px;
background-color: tomato;
}
.Footer-firstElementLeft {
float: left;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
margin-top:0;
margin-right: 2%;
background-color: pink;
}
.Footer-firstElementRight {
float: right;
font-size: 16px;
line-height: 20px;
width: 49%;
height: 100%;
padding: 0;
background-color: gold;
}