JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="row no-gutter">
    <div class="col-xs-3">
        <div class="btn-group columns">
            <button type="button" class="btn btn-default glyphicon glyphicon-file filterButtons" title="File uploader"></button>
        </div>
    </div>
    <div class="col-xs-9">
        <div class="btn-group col-xs-2 pull-right">
            <button type="button" class="btn btn-default glyphicon glyphicon-th" title="Thumbnail view"></button>
            <button type="button" class="btn btn-default glyphicon glyphicon-align-justify" title="Details list view"></button>
        </div>
        <div class="search col-xs-3 pull-right">
            <input type="text" class="form-control" autocomplete="off" placeholder="Search file...">
        </div>
        <div class="form-group col-xs-4 pull-right">
            <label class="control-label" for="filter">Filter:</label>
            <div class="controls btn-group" id="filter">
                <button type="button" class="btn btn-default glyphicon glyphicon-file" title="Not image file"></button>
                <button type="button" class="btn btn-default glyphicon glyphicon-picture" title="Image file"></button>
                <button type="button" class="btn btn-default glyphicon glyphicon-list" title="Filter 3"></button>
                <button type="button" class="btn btn-default glyphicon glyphicon-list" title="Filter 4"></button>
            </div>
        </div>
    </div>
</div>

CSS

.no-gutter [class*="-2"] {
    padding-right:0;
}