JSFiddle - React, Tailwind, and code Playground

by nynexman4464

HTML

<div class=vcard>
  <div class=image><img src="fake" width=300 height=300></div>
  <div class=details>
    <div class=address>
      <div class=address-line><span>Tel</span><span>555-555-5555</span></div>
      <div class=address-line><span>Address</span><span>long long long long long</span></div>
    </div>
  </div>
</div>

CSS

.vcard {
  display: flex;
  flex-direction: row;
  .address {
    display: flex;
    flex-direction: column;
    .address-line {
      //display: flex;
      //flex-direction: row;
      span:first-child {
        width: 200px;
      }
      span {
        //display: block;
        flex-grow: 1
      }
    }
  }
}