JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 <div class="form-group">
    <label for="" class="col-lg-1 control-label">input</label></div>
    <div class="col-lg-9">
        <div class="row">
            <div class="col-lg-6">
               <div class="input-group input-group-md input-text-fields">
                <div class="inner-elements">
                    <div class="bg-color">
                        <div class="pad_box"><i class="fa fa-file-text"></i></div>
                    </div>
                </div>
                <div class="inner-elements">
                    <div><input class="form-control" type="text" name="files" placeholder="test"></div>
                </div>
                <div class="inner-elements">
                    <div class="bg-color-red">
                        <div class="pad_box"><a id="help" data-container="body" data-toggle="popover" data-placement="right" data-content="Content Here."><i class="fa fa-question fa-lg"></i></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.inner-elements {
        float: left;
    }
    .bg-color {
        background-color: #dedede;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .bg-color-red {
        background-color: rgb(217, 83, 79);
        color: #fff;
        cursor: pointer;
         border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    a { color: #fff;}
    a:hover { color: #fff;}
    .pad_box {
        padding-bottom: 7px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 7px;
    }

JavaScript

$('#help').popover('hide');