JSFiddle - React, Tailwind, and code Playground

by Brett DeWoody

HTML

<div class ="colab_page_block_full colab_margin_bottom">
  <div class ="colab_page_block_half colab_page_block_left colab_top">
    <img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-01.jpg" alt="" class="colab_image colab_bottom">
  </div>
  <div class ="colab_page_block_half colab_page_block_right">
      <h1 class="colab_text_padding">About Chiara Debenedetti</h1>
      <p class="colab_text_padding">Chiara Debenedetti was born in Italy in 1982 and graduated from the European Design Institute of Milan in 2003. She founded Harta Design in 2011 and specializes in packaging, logos and corporate identity for luxury brands in the fashion, fragrance and food and beverage industries.</p>
      <p class="colab_text_padding">“Design for me is going beyond the visual form in order to develop the material aspect. We have five senses, but we often forget about touch. And yet this is the sense that allows us to first interact with the reality that surrounds us: the mother-daughter relationship comes to mind. In my daily work as a designer, whether I am dealing with graphics or home décor objects, I always pay particular attention to the materials. My studio has become a depository of paper and textiles. With Bloomx, I aimed to highlight the X-factor of felt: its feeling of warmth to the touch together with the lightness of the shapes that one can create at will.” </p>
  </div>
</div>

<div class ="colab_page_block_full colab_margin_bottom">
  <img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-02.jpg" alt="" class="colab_image colab_bottom">
</div>

<div class ="colab_page_block_full colab_margin_bottom">
  <div class ="colab_page_block_half colab_page_block_left colab_bottom">
    <img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-03.jpg" alt="" class="colab_image colab_bottom">
  </div>
  <div class ="colab_page_block_half...

CSS

.colab_page_block p {
  margin: 0;
  font-style: normal;
  font-weight: normal;
  font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #585858;
  margin-top: 1.4em;
}

.colab_page_block h1 {
  margin: 0;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-family: Museo-300, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2rem;
  line-height: 1;
  color: #2f292a;
}

.colab_page_block_full {
	width: 100%;
	overflow:auto;	
	display: table; 
  border: 1px solid black;
}

.colab_page_block_half {
	width: 48% ;
	display: table-cell;
} 
	
.colab_page_block_left {
	padding-right: 2%;
  border: 1px solid red;
}

.colab_page_block_right {
	padding-left: 2%;
  border: 1px solid blue; 
}

.colab_text_padding {
	padding-left: 4%;
	padding-right: 8%;
}

.colab_image {
	overflow:auto;	
  width: 100%;
	height: auto;
}

.colab_bottom {
	vertical-align: bottom;
}
.colab_top {
	vertical-align: top;
}
.colab_margin_bottom {
	margin-bottom: 3.5em;
}