JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
    <div class="subtitle">
      Some text that I just -know- will be too long, and should be truncated using CSS for responsiveness.
    </div>
  </a>
  <a class="action action--r" href="#">
    <div class="sibling">&lt;sibling&gt;</div>
  </a>
</div>

CSS

.tile {
  border: 1px solid black;
  display: flex;
  margin: 1em 0;
}

.action {
  border: 1px dashed black;
  color: black;
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  padding: 1em;
  text-decoration: none;
}

.action--r {
  flex-grow: 0;
  flex-shrink: 0;
}

.subtitle {
  display: inline-block;
  width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}