JSFiddle - React, Tailwind, and code Playground

by fangyang

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<!-- <form class="form-horizontal"> -->
<form class="form-inline" role="form">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <div class="form-group">
                <div class="controls">
                    <label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
                    <div class="col-sm-7">
                        <ul class="control-group list-inline">
                            <li class="col-xs-3">
                                <select class="form-control">
                                    <option value="">Choose...</option>
                                    <option value="1">Canada</option>
                                    <option value="1">China</option>
                                    <option value="1">UK</option>
                                </select>
                            </li>
                            <li class="col-xs-3">
                                <input type="text" class="form-control" maxlength="4" class="year" placeholder="Year" />

                            </li>
                            <li class="col-xs-3">
                                <div class="ended-position">
                                    <select class="form-control">
                                        <option value="">Choose...</option>
                                    </select>
                                </div>
                            </li>
                            <li class="col-xs-3">
                                <input type="text" class="form-control" maxlength="4" placeholder="Year" />
                            </li>
                        </ul><div style="clear:both"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</form>

CSS

html, body {
    width:100%;
}