JSFiddle - React, Tailwind, and code Playground

HTML

<article class="container">
  <div class=a-float>
    Float: Narrow
  </div>

  <div class=a-float>
    Float: A little wider
  </div>

  <div class=a-float>
    Float: None of these floats have defined widths, so the browser will use as much space as needed for the text, avoiding line breaks as much as possible, until the containing shape is filled.
  </div>

  This is normal text.

  <div class=clear></div>
</article>

CSS

body {
  line-height: 1.4em;
  font-family: system-ui, sans-serif;
  color: #333;
  background: white;
  padding: 0 0.6em;
}

.a-float {
  float: right;
  clear: right;
  
  /* to show shape */
  background: #cce2ff;
}

.a-float + .a-float {
    margin-top: 1.4em;
}

.container {
  max-width: 30em;
  margin: 1.4em auto;
  border: 4px solid #ffddee;
}

.clear {
  clear: both;
}