JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
     <div class="header">
         <div class="header_line"></div>
      </div>
      <div class="row">
         <div class="avatar"></div>
         <div clas="abme">
            <div class="name"></div>
            <div class="status"></div>
         </div>
      </div>
   </div>

CSS

*{
	box-sizing: border-box;
}

.header_line {
	background-color: #2c3e50;
	height: 100px;
	box-shadow: 0px 5px 0px 0px #233140;
	margin-bottom: 40px;
}

.row{
	margin-left: 15%;
}

.avatar {
	background-color: #2c3e50;
	min-height: 576px;
	width: 20%;
	float: left;
  margin-right: 5%;
}

.abme{
	width: 50%
}

.name {
	background-color: #2c3e50;
	min-height: 70px;
	width: 30%;
	overflow: hidden;
  margin-bottom: 5%;
}

.status{
	background-color: #2c3e50;
	min-height: 60px;
	width: 20%;
	display: block;
  overflow: hidden;
}

.row:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.row { display: inline-block; }
* html .row { height: 1%; }
.row { display: block; }