JSFiddle - React, Tailwind, and code Playground

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.0.3/css/font-awesome.css">
    <div class="col-md-12">
    	<div class='right-inner-addon col-md-2 date datepicker' data-date-format="yyyy-mm-dd">
    		<input name='name' value="" type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd"/>
  			<i class="fa fa-calendar"></i>
   		</div>
    </div>

CSS

.right-inner-addon {
    position: relative;
}

.right-inner-addon i, .form-group .right-inner-addon i{
	display: inline-block;
	position:absolute;
	z-index:3;
	text-indent: -15px;
	bottom: -8px;
	font-size: 1.3em;
}