JSFiddle - React, Tailwind, and code Playground

by betasap

HTML

<div class="brand">
  <div class="brand-info">
    base info 
  </div>
    <div class="brand-list">
      <div class="brand-list-items">
         <img src="http://placehold.it/300" alt="">
         <img src="http://placehold.it/300" alt="">        
         <img src="http://placehold.it/300" alt="">        
         <img src="http://placehold.it/300" alt="">        
         <img src="http://placehold.it/300" alt="">        
      </div>
    </div>
  
  
  
</div>

CSS

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

.brand {
  display: flex;
}
.brand-info {
  flex: 1;
}

.brand-list {
  flex:2
}
.brand-list-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.brand-list-items img {
  flex: 0 0 20%;
}