JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="card">
  <div class="card-block">
    <div class="profile-details-wrapper">
      <img class="profile-picture" src="http://placehold.it/50x50" />
      <span class="profile-details">
        username
      </span>
    </div>
    <span class="profile-details-arrow">
      <i class="icon ion-ios-arrow-down"></i>
    </span>
  </div>
</div>

CSS

.profile-picture {

}
.profile-details {

}
.profile-details-wrapper {
  white-space: nowrap;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-details-arrow {
  float:right;
  font-size: 2em;
  margin-top: -41px;
}