JSFiddle - React, Tailwind, and code Playground

by David Sch

HTML

<div class="ingredients-mobile">
  
    <div class="ingredients-box-mobile"><img src="https://cdn.shopify.com/s/files/1/0101/8200/0697/files/valerianroot_100px.png?2675053543474988716"><br>Valerian Root</div>
  
  <div class="ingredients-box-mobile">Lavender</div>
  
  <div class="ingredients-box-mobile">Lemon Balm</div>
  
  <div class="ingredients-box-mobile">Chamomile</div>
  
  <div class="ingredients-box-mobile">Passion Flower</div>
  
  <div class="ingredients-box-mobile">Hops</div>
  
  <div class="ingredients-box-mobile">Rooibos</div>
  
  <div class="ingredients-box-mobile">Cinnamon</div>

</div>

CSS

.ingredients-mobile {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
flex-wrap: wrap;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
 }

 .ingredients-box-mobile {
   flex: 40%;
border: 1px solid black;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
 }