Display Flex on form/divs

by Kiran Duggal

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="p4t-header-status" class=" approved">
  <div class="p4t-header-status-content approved">
    <div class="status-icon">
      <span class="glyphicon glyphicon-remove p4t-header-status-remove"></span>
    </div>
    <div class="status-text">
      <span>  The requisition has been approved.It is now in responsibility of the supplier. </span>
      <br>
      <span> In case items are not delivered on time, please contact your POOL4TOOL admin to the supplier directly!</span>
    </div>
    <div class="status-icon"> <span class="glyphicon glyphicon-remove p4t-header-status-remove"></span></div>
  </div>
</div>

CSS

.p4t-header-status-content {
  display: flex;
  justify-content: center;
  position: relative;
  justify-content: initial;
  align-items: center;
}

.p4t-header-status-content .status-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p4t-header-status-content .status-icon {
  width: 40px;
  text-align: center
}