JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="form-group textarea">
  <label for="address">Your address<sup>*</sup></label>
  <div class="input-group">
    <div class="input-group-addon"><i class="fa fa-pencil"></i></div>
    <div class="input-group-textarea">
      <textarea class="form-control" id="address" placeholder="Your address" rows="10"></textarea>
    </div>
  </div>
</div>

SCSS

.form-group {
  background-color: #ccc;
  &.textarea {
    label{
      display: block;
    }
    .input-group {
      display: inline-block;
      position: relative;
      width: calc(100% - 40px);
      .input-group-addon {
        width: 40px;
        height: 40px;
        position: absolute;
      }
      .input-group-textarea {
        position: relative;
        display: block;
        margin-left: 40px;
        width: 100%;
        textarea.form-control {
          resize: none;
        }
      }
    }
  }
}