JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-div">
    <div class="row">
        <div class="date">monday, 2015 09 02 </div>
        <div class="time">12:10</div>
        <div class="select"><a href="#">Choose <span class="select-arrow"></span></a>           </div>
    </div>
    <div class="row">
        <div class="date">thuesday, 2015 06 22</div>
        <div class="time">12:30</div>
        <div class="select"><a href="#">Choose <span class="select-arrow"></span></a></div>
    </div>
    <div class="row">
        <div class="date">wensday, 2015 02 9</div>
        <div class="time">09:15</div>
        <div class="select"><a href="#">Choose <span class="select-arrow"></span></a></div>
    </div> 
</div>

CSS

.wrapper-div{
    border-spacing: 0 5px;
    display: table;
    margin: 20px 0 30px;
    width: 100%;
}

.wrapper-div p{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
}

.wrapper-div .row{
    display:table-row;
    height:45px;
    line-height: 45px;
    text-align: center;
}

.wrapper-div .row > div, 
.wrapper-div .row.grey > div{
    padding-left: 20px;
    text-align: left;
}
.wrapper-div .row > div {
    background-color: #f2f2f2;
}

.wrapper-div .row > div:first-child {
    border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
}

.wrapper-div .row > div:last-child {
    border-radius: 0 10px 10px 0; 
    -moz-border-radius: 0 10px 10px 0;
}

.row .date, .row .time, .row .select{
    display:table-cell;
}
.row .date{
    width:130px;
}
.row .time{
    width:75px;
}
.row .select{
    font-family: "BebasNeuewebfont";
    font-size: 18px;
    text-transform: uppercase;
    width: 30px;
}
.row .select > a {
    color: #000000;
    text-decoration:none;
}
.row .select > a:hover{text-decoration:underline;}

JavaScript

$('.select a').click(function(e){
    e.preventDefault();
    $('.wrapper-div div').removeClass('active'); // remove first
    $(this).parents().eq(1).addClass('active');
});