JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<body>

<div class="container-fluid">
  <div class="row row-eq-height">
      <div class="box col-md-2 col-lg-2 col-sm-2 col-xs-2">
        Sample bit of text           
      </div>
      <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
      <div class="flex-wrapper">
          <a class="header-light title" id="X" href="http://www.bbc.co.uk">Like Text the quick brown fox jumped over the flat cat with the aplomb of a fit ferile dog like animal</a>
          <span class="description">Description text this is lots of very very very interesting text text</span>
      </div>
    </div>
  </div>
  <div class="row row-eq-height">
      <div class="box col-md-2 col-lg-2 col-sm-2">
        Sample bit of text with 2 rows             
      </div>
      <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10">
      <div class="flex-wrapper">
          <a class="header-light title" id="X" href="http://www.bbc.co.uk"> this is short!</a>
          <span class="description">Description text</span>
      </div>
    </div>
  </div>
</div>

</body>

CSS

.row {
  margin-bottom: 5px;
}

.header-light {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}

#result-container .container {
    padding-top: 0.5em;
    padding-left: 0px;
    padding-right: 0px;
}

.title {
    line-height: 1em;
    font-size: 1.8em;
    padding-top: 0px;
    padding-bottom: 0px;
}

.flex-wrapper {
  height:100%;
  display:flex;
  justify-content: center;
  flex-direction:column;
}

.box {
	color: white;
  background-color: #333333;
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.6em 0;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
}