stuck at aligning multiple items in a row

I wanted all the fields Price, Quantity, Total alligned in a single row like in the above screenshot attached.How can i achieve that?I am newbie in designing. Any hep to fix this is appreciated.The full code snippet along with css is available here: https://jsfiddle.net/wfgx02st/ .Please have a look.

<div id="app">
 
  <div id="cart">
    <div id="head">
      <h3>Shopping Cart</h3>
      <div id="price">Price</div>
      <div id="quantity">Quantity</div>
      <div id="total">Total</div>
    </div>
  </div>
  <div id="buy-box">
   <div class="row">
    <form action="" method="POST">
      <img src="" style="height: 100px;"/>
      <h4>Beer Bottle</h4>
      <p>$25</p>
      <input type="hidden" name="product_id" value="1">
      <input type="hidden" id="session_id" name="session_id" value="1">
      <input type="hidden" name="user_id" value="1">
      <div><input type="number" name="quantity" value="5" style="width: 7%;height:3%" ></div>
      <div class="totalprice">$25</div>
      <div class="" style="display: flex;flex-direction: row;">
         <button type="submit" class="option2" style="border: none;background: white;color: deeppink;">Add To Cart</button>
      </div>
    </form>
  
    <form action="" method="POST">
     <input type="hidden" name="session_id" value="6">
     <input type="hidden" name="user_id" value="2">
       <div class="">
         <button type="submit" class="option2" style="border: none;background: white;color: deeppink;">Remove</button> 
       </div>
    </form>
   </div>
  </div>
  <form action=""  method="POST">
    <div style="margin: 10px;"> <h5 >Sum: 50</h5></div>
  </form>
</div>