JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Test Flex</h1>
<div class="mittig">
  <div class="hori2verti">
    <p>Ein Ring</p>
    <img src="http://via.placeholder.com/100x60/f00/000?text=Lorem" alt="Lorem">
    <p>sie zu</p>
    <img src="http://via.placeholder.com/100x60/080/fff?text=Ipsum" alt="Ipsum">
    <p>knechten</p>
  </div>
</div>

CSS

/* dbg */ div.mittig { border: 1px dotted red; }
/* dbg */ div.hori2verti { border: 2px solid green; }

img {
  max-width: 4rem;
}

div.mittig { text-align:center;}
div.hori2verti
{
  margin: 0 auto;
  font-size: 1.6rem; 
	font-weight: bold;
  display:inline-flex;
	justify-content:center;
	align-items: center;
}
div.hori2verti p {
  border:1px solid blue;
  margin: 0 0.5em;
}

@media (max-width:35em) {
  div.hori2verti { flex-direction:column; }
}