JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <div id="heading">
    <div id="colD">empty</div>
    <div id="colE">
      <p><img class="floral-icon" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="floral icon" width="32" height="32"></p>
    </div>
    <div id="colF">
      <p>Lewis</p>
    </div>
    <div id="colG">
      <p><img class="floral-icon" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="floral icon" width="32" height="32"></p>
    </div>
    <div id="colH"></div>
  </div>

CSS

#heading {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  position: relative;
  height:100%;
  height: 300px;
  width: 960px;
}

#heading::before {
  background-color: rgba(240, 216, 171, 0.25);
  display: block;
  content: '';
  position: absolute;
  height: inherit;
  width: inherit;
}

#content {
  float: left;
  height: 1800px;
  width: 960px;
  font-size: 1.1em;
  line-height: 1.2em;
  z-index: 1;
  position: relative;
}