JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-2 col-sm-8 col-xs-offset-2 col-xs-8">
                <div class="form-group">
                    <label>Período</label>
                    <div class="form-inline">
                        <div class="row">
                            <div class="col-md-4">
                                <div id="inicial">
                                    <label>Data inicial</label>
                                    <input type="date" class="form-control" placeholder="Período inicial">
                                </div>
                                <div id="final">
                                    <label>Data final</label>
                                    <input type="date" class="form-control" placeholder="Período final">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

CSS

#inicial {float: left; width: auto;}
#final {float: left; width: auto;}