JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="input-button-collection inside-collection">
<div id="input-collection" class="input-group input-group-lg">
<span class="input-group-addon"><i class="glyphicon glyphicon-link"></i></span>
<input id= "url-input-box" type="url" class="form-control" name = "url" placeholder="http://www.example.com">
<span class="input-group-btn">
<button id="submit-url-btn" class="btn btn-success" type="button">Go!</button>
</span>
</div>
<div id="error-msg" class="help-block">
<i class="glyphicon glyphicon-exclamation-sign"></i>
Input is invalid
</div>
</div>
CSS
.input-button-collection {
display: block;
margin-left: 24%;
margin-right: 24%;
}
.custom-input-button {
text-align: center;
position:absolute;
margin-left:33.7%;
margin-top:-7.1%;
}
.input-header {
color: #7F7F7F;
text-align: center;
margin: auto;
}
.page-header-text {
padding-left: 15px;
padding-top: 20px;
padding-bottom: 10px;
margin: 0px;
color:fff;
font-size: 36px;
font-family: Arial;
}
.preview-container {
margin: auto;
}
.inside-collection {
}
JavaScript
$(document).ready(function() {
$("#error-msg").hide();
});