JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="div1">
            <input type="text" placeholder="Reminder Name"/>
    </div>
    <div class="div2">
        <div class="div2_1">
            <input type="text" value="Wed, Jun 27, 2012"/>
        </div>
        <div class="div2_2">
            <input type="text" value="8.00am"/>
        </div>
    </div>
    <div class="div3">
        <div class="div3_1">
            <input type="button" value="Done"/>
        </div>
    </div>
</div>

CSS

div{
    padding: 3px 0;
}
input {
    width: 100%;
}
.parent{
    width: 400px;
}
.div1, .div2, .div3{
    width: 100%;
}
.div2_1, .div2_2{
    display: inline-block;
}
.div2{
    display: inline-block;
}
.div2_1{
    width: 55%;
    float: left;
}
.div2_2{
    width: 50px;
    float: right;
}
.div3_1{
    width: 30%;
    display: inline-block;
    float: right;
}