JSFiddle - React, Tailwind, and code Playground

by dholbert

HTML

<div class="flex">
  <div class="paragraph">
    long string of text which will probably have to wrap
  </div>
  <img src="//placekitten.com/40/40">
  <div class="small-block">
    a
  </div>
</div>

<div class="flex zero-insets">
  <div class="paragraph">
    long string of text which will probably have to wrap
  </div>
  <img src="//placekitten.com/40/40">
  <div class="small-block">
    a
  </div>
</div>

CSS

.flex {
  display: flex;
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid black;
  justify-content: center;
}

.flex > * {
  align-self: center;
  /* justify-self has no effect on flex items or on abspos flex children: */
  /* justify-self: center; */
  position: absolute;
}
.zero-insets > * {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.small-block {
  height: 30px;
  width: 30px;
  border: 2px solid lime;
}
.paragraph {
  border: 2px solid red;
}
img {
  border: 2px solid cyan;
}