JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-header">
  <div class="title">
    <h1>Product 1</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 1 is a cool product</p>
</div>

<div class="product-header">
  <div class="title">
    <h1>Product 2</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 2 is a cooler product</p>
</div>

CSS

.product-header {
    clear: both;
}

.product-header .title {
    float: left;
}
        
.product-header .admin {
    float: left;
    margin-left: 10px;
}

.product-header .description {
float: left;
    clear: both;
}