JSFiddle - React, Tailwind, and code Playground

HTML

Do any boxes below have the "abc" text aligned with the "inline-*" text?
<br>
<br style="clear:both">

<div class="wrap">
  abc
  <span class="scrollable inline-block">
    <div class="tall">inline-block</div>
  </span>
</div>

<div class="wrap">
  abc
  <span class="scrollable inline-flex">
    <div class="tall">inline-flex</div>
  </span>
</div>

<div class="wrap">
  abc
  <span class="scrollable inline-grid">
    <div class="tall">inline-grid</div>
  </span>
</div>

</body>

CSS

.wrap {
  border: 3px solid purple;
  margin: 1px;
  float: left;
  font: 22px serif;
}

.scrollable {
  overflow: scroll;
  font: 14px serif;
  height: 100px;
  border: 8px solid black;
}
.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

.inline-grid {
  display: inline-grid;
}
.tall { height: 500px; }