JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class='col'>
<table class='whatson'><tr><td><p class='whatson-title'>Blighty Bound</p></td></tr><tr>
<td>Picture Placeholder</td></tr><tr>
<td><p class='whatson-dates'>26th to 29th November 2014 at 7.30 pm.</p></td></tr><tr>
<td><p class='whatson-company'>Cotswold Players</p></td>

</tr><tr class='sg-link-row'>
<td><div class='sg-read-more'>Find out more placeholder</div>
</tr></table>
</div>

<div class='col'>
<table class='whatson'><tr><td><p class='whatson-title'>Cinderella</p></td></tr><tr>
<td>Picture Placeholder</td></tr><tr>
<td><p class='whatson-dates'>21st to 24th and 28th to 31st January 2015 at 7.30 pm. (2.30 pm matinees on both Saturdays)</p></td></tr><tr>
<td><p class='whatson-company'>Cotswold Players</p></td>

</tr><tr class='sg-link-row'>
<td><div class='sg-read-more'>Find out more placeholder</div>
</tr></table>
</div>

<div class='col'>
<table class='whatson'><tr><td><p class='whatson-title'>The Autumn of Han</p></td></tr><tr>
<td>Picture Placeholder</td></tr><tr>
<td><p class='whatson-dates'>6th February 2015</p></td></tr><tr>
<td><p class='whatson-company'>Red Dragonfly Productions</p></td>

</tr><tr class='sg-link-row'>
<td><div class='sg-read-more'>Find out more placeholder</div>
</tr></table>
</div>

<div class='col'>
<table class='whatson'><tr><td><p class='whatson-title'>The Bronte Season - Jane Eyre</p></td></tr><tr>
<td>Picture Placeholder</td></tr><tr>
<td><p class='whatson-dates'>11th February at 7.30 pm</p></td></tr><tr>
<td><p class='whatson-company'>Live Wire Theatre</p></td>

</tr><tr class='sg-link-row'>
<td><div class='sg-read-more'>Find out more placeholder</div>
</tr></table>
</div>

<div class='col'>
<table class='whatson'><tr><td><p class='whatson-title'>The Bronte Season - Wuthering Heights</p></td></tr><tr>
<td>Picture Placeholder</td></tr><tr>
<td><p class='whatson-dates'>13th February at 7.30 pm</p></td></tr><tr>
<td><p class='whatson-company'>Live Wire Theatre</p></td>

</tr><tr class='sg-link-row'>
<td><div...

CSS

.clear {clear: both;}

.col{
  border:1px dashed;
  min-height:20px;
  margin-bottom: 30px;
  width:100%;
  float:left;
  box-sizing:border-box;
    
   overflow:hidden;
    
}


@media screen and (min-width:480px) {
		.col {
     width: 50%;
  }
  }
@media screen and (min-width:880px) {
		.col {
     width: 25%;
  }
}


table.whatson {
    table-layout: fixed;
    margin-left:auto; 
    margin-right:auto;
    border: none;

 margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;}

table.whatson td {
   text-align: center;
   vertical-align: top;
      padding: 5px;
   width: 220px;
   color:#000000;
  position:relative;

}

.whatson-title  {
   font-size: large;
   font-weight: bold;
}	
.whatson-dates  {
   font-weight: bold;
}	

tr.sg-link-row {
	height: 50px;
}

div.sg-read-more {
			position:absolute;  
			left:15px;
			bottom:2px; 
			}
			
div.sg-read-more a{
			display:block;
			background:url(images/read-more.png) no-repeat 0 0; 
			width:80px;
			height:40px;
			text-indent:-9999px;
			}			
			
div.sg-read-more a:hover {
    background-position:0 -40px;
			}	
			
div.sg-book-ticket {
			position:absolute;  
			right:15px;
			bottom:2px; 
			}

div.sg-book-ticket a{
			display:block;
			background:url(images/buy-ticket.png) no-repeat 0 0; 
			width:80px;
			height:40px;
			text-indent:-9999px;
			}			
			
div.sg-book-ticket a:hover {
    background-position:0 -40px;
			}