JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <p>A</p>
  <p>B</p>
  <div id="spacer" aria-hidden="true"></div>
  <p>C</p>
</article>

CSS

article {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

p {
  margin: 1em;
  min-width: 10em;
  line-height: 3em;
  text-align: center;
  background-color: lightgreen;
}

p:last-child() {
  align-self: center;
}

#spacer {
  flex: 1;
  height: 0em;
}

@media (max-width: 37em) { div { display: none;} }