JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
<div class="columns is-centered is-vcentered">
  <div class="column is-2">
    <div class="box has-text-centered">
       A
    </div>
  </div>
  <div class="column is-2">
    <div class="box has-text-centered">
       B
       more elements
     </div>
  </div>
</div>

CSS

.box {
  border-radius: 50% 50%;
}

.box::after {
  content: "";
  display: block;
  padding-bottom: 84.4%;

}