Text alignment using CSS grid

Presented here is an example of how text can be vertically aligned relative to a left aligned image.

by David Partyka

HTML

<div class=a>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span data-alignment=start>Doesn't work.</span>
</div>
<br>
<div class=b>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span data-alignment=center>Doesn't work.</span>
</div>
<br>
<div class=c>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span data-alignment=end>Doesn't work.</span>
</div>
<br>
<div class=d>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span data-alignment=baseline>Doesn't work.</span>
</div>
<br>
<div class=b>
  <img src="https://cssburner.com/images/dp.png" alt="small img" />
  <span data-alignment=center>An example showing an image of different dimensions to demonstrate the extendability of this approach.</span>
</div>

CSS

div {
  display: grid;
  grid-template-columns: min-content max-content;
  gap: 4px;
}

.a {
  align-items: start;
}

.b {
  font-weight: bold;
  align-items: center;
}

.c {
  align-items: end;
}

.d {
  align-items: baseline;
}

div span::after {
  content: " (alignment = " attr(data-alignment) ")";
}