JSFiddle - React, Tailwind, and code Playground

HTML

<div class="profile" id="userprofile">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This is basic information about this person that you clicked.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This is a tag line from the person that you clicked.
  </div>
</div>

CSS

.profile {
  font-size: 0;
  background: silver;
}
.miniBioSegment {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}