<h1>Not working examples:</h1>
<div class="tile">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that 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>

<div class="tile" style="max-width: 100px">
  <a class="action" href="#">
    <div class="subtitle">
      Some text that 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>


<h1>Fixed example:</h1>

<div>
<div class="tile">
  <a class="action" href="#" style="min-width:0">
    <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>
</div>

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

.action
  border: 1px dashed black
  color: black
  flex-shrink: 1
  flex-grow: 1
  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