JSFiddle - React, Tailwind, and code Playground

by murata_s

HTML

<p id="inlineBlock">
  <span>蒼く</span><span>透き通った</span><span>空と</span><span>瀬戸内の</span><span>柔らかな</span><span>波の音</span>
</p>

<p id="flexbox">
  <span>蒼く</span>
  <span>透き通った</span>
  <span>空と</span>
  <span>瀬戸内の</span>
  <span>柔らかな</span>
  <span>波の音</span>
</p>

<p id="nesting">
  <span>
    <span>蒼く</span>
    <span>透き通った</span>
    <span>空と</span>
  </span>
  <span>
    <span>瀬戸内の</span>
    <span>柔らかな</span>
    <span>波の音</span>
  </span>
</p>

SCSS

#inlineBlock {
  span {
    display: inline-block;
  }
}

#flexbox {
  display: flex;
  flex-wrap: wrap;
}

#nesting,
#nesting > span {
  display: flex;
  flex-wrap: wrap;
}