JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<ul>

  <li>
    <div class="img">
      thumbnail
    </div>
    <div class="details">
      <p>
        Title
      </p>
      <p>
        Low Stock
      </p>
    </div>
    <div class="qty">
      <input type="number" />
    </div>
  </li>

  <li>
    <div class="img">
      thumbnail
    </div>
    <div class="details">
      <p>
        Title
      </p>
    </div>
    <div class="qty">
      <input type="number" />
    </div>
  </li>

  <li>
    <div class="img">
      thumbnail
    </div>
    <div class="details">
      <p>
        Title
      </p>
    </div>
    <div class="qty">
      <input type="number" />
    </div>
  </li>
</ul>

CSS

* { box-sizing: border-box; }

ul { list-style: none; width: 100%; display: flex; }

li {
  width: 29.4117647059%;

display: flex;
flex-direction: column;

  text-align: center;
  border: 1px solid red;
}

.qty {
  margin-top: auto;
}

.qty input { width: 5em; }