Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive.
Despite setting specific dimensions for the left-hand date block, I encountered issues with its width and height adjusting unexpectedly in both IE and Chrome.
https://jsfiddle.net/yuum08d9/
<style>
body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {
}
...
// The rest of the CSS code is unchanged
</style>
<div id="Experience" class="Block">
<h4>
Work Experience
</h4>
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">January 2015 -<br />Present</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations...
...
// The rest of the HTML code remains the same
</div>