JSFiddle - React, Tailwind, and code Playground

HTML

<div class="eggpic">
    <img src="http://www.w3schools.com/cssref/smiley.gif"/>
 </div>
<div class="timersection">
    <div class="timersectiontext">Hello</div>
</div>
<div class="buttonpic softboil">
    <img src="http://www.w3schools.com/cssref/smiley.gif"/>
</div>

CSS

.timersection{
    width:58%;
    height:100%;
    display: inline-block;
    background-color: red;
}
.eggpic{
    width:10%;
    height:100%;
    display: inline-block;
    background-color: greenyellow
}
.buttonpic{
    width:10%;
    height:100%;
    display: inline-block;
    background-color: blue;
}

.eggsection{
    width: 100%;
    height: 33%;
    padding-bottom: 10;
}

.timersectiontext{
    display: inline-block;
    background-color: greenyellow;
    height:100%;
    width:100%;
    text-align:center;
    vertical-align: top;
}

img {
    max-width: 100%;
    max-height: 100%;
}