JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div>
    <input class="form-control" id="num-of-prods-1" type="text" placeholder="Number of units">
  </div>
  <div>
    <input class="form-control" id="prod-unit-price-1" type="text" placeholder="Unit price">
  </div>
  <div>
    <input class="form-control" id="discount-rate-1" type="text" placeholder="Discount rate %">
  </div>
  <div>
    <input class="form-control" id="order-amount-1" type="text" placeholder="Total">
  </div>
</div>

<div class="row">
  <div>
    <input class="form-control" id="num-of-prods-2" type="text" placeholder="Number of units">
  </div>
  <div>
    <input class="form-control" id="prod-unit-price-2" type="text" placeholder="Unit price">
  </div>
  <div>
    <input class="form-control" id="discount-rate-2" type="text" placeholder="Discount rate %">
  </div>
  <div>
    <input class="form-control" id="order-amount-2" type="text" placeholder="Total">
  </div>
</div>

CSS

.row div{display:inline-block;}