JSFiddle - React, Tailwind, and code Playground

HTML

<article class="product" itemscope itemtype="http://schema.org/Product">
      <div class="images">
        <a href="images/product.jpg">
          <img alt="Sumatra Coffee Beans" itemprop="image" src="images/product.jpg">
        </a>
      </div>
      <div class="content">
        <header>
          <h1 itemprop="name">Sumatra Coffee Beans</h1>
        </header>
        <div class="code">
          <span class="label">Item Number:</span>
          <span itemprop="productID">sumatra-coffee</span>
        </div>
        <div class="reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
          <div class="details">
            Rated <span itemprop="ratingValue">4.5</span>/5
          </div>
          <div class="count">
            (<span itemprop="reviewCount">9</span> reviews)
          </div>
        </div>
        <div class="offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <div itemprop="itemOffered" itemscope itemtype="http://schema.org/IndividualProduct">
            <span class="sku" itemprop="sku">scb-ov1</span>
            – (<span itemprop="weight">12 oz.</span>)
          </div>
          <div class="price" itemprop="price">$14.99</div>
          <meta content="USD" itemprop="priceCurrency">
        </div>
        <div class="offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <div itemprop="itemOffered" itemscope itemtype="http://schema.org/IndividualProduct">
            <span class="sku" itemprop="sku">scb-ov2</span>
            – (<span itemprop="weight">16 oz.</span>)
          </div>
          <div class="price" itemprop="price">$20.99</div>
          <meta content="USD" itemprop="priceCurrency">
        </div>
      </div>
    </article>

CSS

.reviews > * {
  display: inline; }
.offer {
  margin: .8em 0; }
  .offer [itemprop='itemOffered'], .offer .price {
    display: inline;
    margin-left: 1.4em; }