JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="header">
    <div  class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</div>
    <div  class="header_eta"></div>
  </div>
  
<div  class="content">
  <div class="dummy"></div>

    <div class="img-container">
        <img src="http://placehold.it/75x75" alt="" />
    </div>

  
</div>

<div  class="footer">sdfsd</div>
</div>

CSS

.content {
    height: 100px;
    position: relative;
    width: 100%;
    border: 1px solid black;
    background-color: rgb(239, 65, 59);
}

.header {
    height: 60px;
    background-color: rgb(55, 102, 199);
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
position: absolute;
  top: 10px;
  bottom: 0;
  left: 10px;
  right: 0;
  text-align: left;
}
.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}



.headliner {
  padding:10px;
  height:50px;
}
.footer {
    height: 40px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-top: 5px;
    background-color: rgb(66, 199, 123);
    text-align: left;
}