JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
  
  <div class="left-side">
    <p>
    
      <span class="date">26</span>
     май</p></div>
  
  <div class="item">
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et modi sunt eos quam. Similique quos voluptas <br>
        
        <a href="#1">Читать дальше</a>
        
    </div>
    
  </div>
  
  <div class="left-side">
    
    <p>
      <span class="date">26</span>
     май</p>
    
  </div>
  <div class="item">
    
      <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et modi sunt eos quam. Similique quos voluptas <br>
        
        <a href="#2">Читать дальше</a>
        
    </div>
    
  </div>
  
</div>

CSS

#bg {
  
  width: 666px;
  height: 331px;
  background: green;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  
}


.item {
  
  width: 560px;
  height: 148px;
  background-color: #fff;
  border-radius: 0px 7px 7px 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  
}


.left-side {
  
  width: 80px;
  height: 148px;
  background-color: #fff;
  border-radius: 7px 0 0 7px;
  background-color: rgba(255,255,255,.5);
  text-align: center;
  font-size: 26px;
  color: white;

}




.content {
  
  width: 80%;
  margin-top: 20px;
  font-weight: bold;
  font-size: 20px;
}


.date {
  
  display: block;
  font-weight: bold;
  font-size: 35px;
  margin-bottom: -8px;
 
  
}


a {
  
  display: block;
  text-decoration: none;
  color: #0CC219;
  margin-top: 10px;
  
}