JSFiddle - React, Tailwind, and code Playground

by iamtimmo

HTML

<div class="nautical-flag-item">
    <div class="nautical-flag-item-text">
      <div class="nautical-flag-item-id">0</div>
      <div class="nautical-flag-item-mnemonic">Zero</div>
    </div>
    <div class="nautical-flag-item-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/ICS_Pennant_Zero.svg" alt="Nautical Flag for '0' (Zero)'">
    </div>
  </div>

SCSS

.nautical-flag-item {
  overflow: hidden;
  width: 200px;
  height: 60px;
}

.nautical-flag-item-text {
  float: left;
  vertical-align: middle;
  height: 100%;
}

.nautical-flag-item-image {
  float: right;
  vertical-align: middle;
  height: 100%;
  
  img {
    max-width: 100%;
    max-height: 100%;
  }
}