JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="progress">

  </div>
  <div class="content">
 <h2>
   Some Content Text.... Some Content Text....Some Content Text....
   Some Content Text....Some Content Text....
 </h2>
  </div>
  <div class="status">
  <div class="priority">
  </div>
    <div class="prog">
    </div>
  </div>
</div>

CSS

.container {
  width: 100%;
  background-color: red;
  float: left;
  box-sizing: border-box;
}

.progress {
  float: left;
  width: 5%;
  background-color: green;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}

.content {
  float: left;
  width: 80%;
  background-color: #f2f2f2;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}

.status {
  position:relative;
  float: left;
  width: 10%;
  background-color: #c2c2c2;
  height: 100%;
  box-sizing: border-box;
  margin: 5px;
}


.priority{
  position:relative;
  height:20px;
  top:5%;
  background-color: #a2a2a2;
}

.prog{
  position:absolute;
  width:100%;
  height:20px;
  bottom:5px;
  background-color: #d2d2d2;
}