JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="flex">
  <div class="wrapper">
    <div class="item 1">Hello</div>
    <div class="item 2">World</div>
  </div>
</div>
<div class="block">
  <div class="wrapper">
    <span class="item 1">Hello</span>
    <span class="item 2">World</span>
  </div>
</div>

CSS

body {
  color: rgb(0, 0, 0);
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  padding: .1rem;
}

.wrapper {
  border-radius: .3rem;
  border: solid 1px rgb(0, 0, 0);
  width: 100%;
}

.flex, .flex > .wrapper {
  display: flex;
}

.flex .wrapper {
  justify-content: space-between;
}

.flex .wrapper div {
    display: inline-flex;
}

.block, .block > .wrapper {
  display: block;
}

.block .wrapper {
  margin: 0px auto;
}