Div with Two Columns Containing Vertically Centred Divs of Different Heights - html

Question

Background
I have a div with two columns. In column A, there will be a div with an "About Me" section. This is height X. In column B will be another image of a map. This is height Y. X is not equal to Y.
I am making both columns (combined) = to 100vw. Each column is defined as 50%.
(I can calculate the height of the map in column B with the following math (which can be seen more clearly in the linked Jfiddle): Image is 350x600px. If 350px = 50%, then 600px = ~171%. 171 / 2 = 85.5% so the following code snippet should give the correct transform value:
margin-top: 85.5%;
transform: translateY(-50%);)
Objective
I would like the column height to adjust to the height of the tallest element. The tallest element will most likely always be in column B. I would like the div in column A to sit halfway down the page. However, if I should ever change the order and want to put something taller in column A than in column B, it would be really great to have a fallback so that the element in column B repositions itself to become vertically centred. (But I can live without that and do it manually should I need to.)
Problem
Column heights aren't behaving themselves. The height of column A (shown in dark green) is higher than that of column B, even though the element in A is shorter.
Jfiddle
http://jsfiddle.net/ubjo1s3y/28/
(With nice bright div colours)
Code
css:
.column {
margin: -5px 0px 30px 0px;
float: left;
width: 50%;
height: auto;
background-color: green;
}
.row:after {
background-color: pink;
content: "";
display: table;
clear: both;
height: 0;
}
#aboutmecontainer {
background-color: aqua;
width: 90%;
float: left;
padding: 0px 5% 0px 5%;
margin-top: 85.5%;
transform: translateY(-50%);
}
#facephoto {
background-color: red;
float: left;
width: 130px;
margin: 0px 0px 10px 50%;
transform: translateX(-50%);
}
#aboutmetext {
background-color: yellow;
float: left;
width: 100%;
height: auto;
}
#map {
background-color: yellowgreen;
float: left;
width: 90%;
padding: 0px 5% 0px 5%;
}
html:
<div class="row">
<div class="column">
<!-- container for round face photo -->
<div id="aboutmecontainer">
<div id="facephoto">
<!-- photo -->
<img src="http://via.placeholder.com/200x200" alt="Face" style="height: 100%; width: 100%; object-fit: contain;" />
</div>
<!-- container for text underneath face photo -->
<div id="aboutmetext"><h3 style="color: #000000;">About Me</h3><p></p><h5 style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
</div>
</div>
</div>
<div class="column">
<!-- div for map to right of "about me" section -->
<div id="map">
<!-- map picture can be edited in photoshop to add new countries -->
<img src="http://via.placeholder.com/350x600" alt="Map" style="width: 100%; height: 100%; object-fit: contain;">
</div>
</div>
</div>

Answer 1

First of all, I would definitely recommend learning how to use flexbox.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox.
Additionally, using floats in this situation is going to ruin the flow of the dom. There are situations where using floats can work, but it removes the targeted element from the regular flow of the dom and will always cause you grief if you don't know how to use floats.
Here is a revised jsfiddle that does not use flex. You want to set .column's display to inline-block and put font-size: 0 on .row (removing white-space). And remove all of your floats.
JSFiddle

Answer 2

Have you looked into Flexbox? It drastically simplifies this old height problem.
See this fiddle :
http://jsfiddle.net/uy2pqbkL/
Everything else is the same except the new properties added to your .row class.
.row {
display:flex;
align-items:center;
}