JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">
    <h3>Form widths</h3>
    <form role="form">
        <div class="form-group">
            <label>Auto width</label>
            <div class="input-group">
                <input class="form-control" placeholder="Auto width" />
                <div class="clear">
                    <a href="#" class="glyphicon glyphicon-remove"></a>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>100% width</label>
            <div class="input-group" style="width: 100%">
                <input class="form-control" placeholder="100% width" />
                <div class="clear">
                    <a href="#" class="glyphicon glyphicon-remove"></a>
                </div>
            </div>
        </div>
    </form>
</div>

CSS

.clear {
    width: 1%;
    display: table-cell;
    padding-left: 3px;
    vertical-align: middle; }
.clear a:hover { text-decoration: none; }