JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/css/docs.css">
<div class="callout panel" style="background-color:#535F6D;">
  <div class="row">
    <div class="large-4 medium-4 columns" style="height:100px;">
      <div class="callout" style="">
        <p style="color:#fff;font-size:11px;text-align:left;">
          Event cum exhibition
          <span style="text-transform:uppercase">
            <br/>
            Series 1
          </span>
        </p>
        <p style="color:#fff;font-size:12px;text-align:left">
          Series 2
        </p>
      </div>
    </div>
    <div class="large-8 medium-8 columns" style="border-left:1px dotted #fff;height:215px;overflow-y:scroll">
      <div class="callout">
        <p style="color:#fff;font-size:14px;text-align:left" id="series1">
         Series 1
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        </p>
        
        <p style="color:#fff;font-size:14px;text-align:left" id="series2">
         Series 2
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
          <br/>
          Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        </p>
      </div>
    </div>
  </div>
  
</div>