JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="main_content">
           <div class="first">PICTURE</div>
           <div class="items">
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
                <div class="item">ITEM</div>
           </div>
        </div>
        <div class="content_4">CONTENT_4</div>
 </div>

CSS

body{  
margin: 0;
}


.wrapper {
  width: 500px;
  display: flex;
  height: 200px;
  margin: 0 auto;
  align-items: flex-start; 
}
.main_content {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}
.first {
  border-style:solid;
  background-color:blue;
  width: 100%;
}
.item{
  flex: 1; 
  margin: 0 0px; 
  min-width: calc(100% * (1/4) - 1px);
  margin-right:10px;
  border-style:solid;
  height: 30px;
 
  }
.items{
  flex: 1; 
  display: flex; 
  flex-wrap: wrap; 
  align-content: flex-start;
  
  
}
.items * {
  box-sizing: border-box;  
}
.content_4{
  height:200px;
  width:20px;
  background-color: red;
  flex: 1;
  margin-left: 10px;
}