JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">



<ul class="dropdown-menu dropdown-alerts notificationul" id="notificationsDropDown">
  <li id="8" class="notificationliUnread">
    <a href="/NotificationArea/Index?notifId=8">
      <div class="notificationSection">
        <div class="nStatus">
          <i class="fas fa-circle"></i>
        </div>
        <div class="nBody">
          <h3>
            Marta Tutor
          </h3>
          <h4>
            Mauris rutrum est sed dolor accumsan, nec placerat massa consequat. 
          </h4>
        </div>     
        <div class="nInfo">
           <h5>
             18:00
           </h5>
        </div>        
      </div>
    </a>
  </li>
  <li class="divider"></li>
</ul>

CSS

.notificationSection {
  display : flex;
  border : 1px solid red;
  align-items: center;

}
.nStatus {
  border : 1px solid black;
  width : 40px;
  text-align: center;
  height : 100%;
}
.nBody {
  display : block;
}
.nBody h3 {
  padding:0;
  margin:0;
  color : yellow;
}
.nBody h4 {
  padding:0;
  margin:0;
    color : aqua;

}

.nInfo {
  border : 1px solid green;
  width : 40px;
  text-align: center;
  height : 100%;
}