Inline input and image in a bootstrap form - css

Question

I'm new to bootstrap and was wondering how could I place my icon/picture inline to the right of my textfield?
I would like my textField to be a little bit smaller (without hardcoding anything) so the image is on the same line, using the same space. I should work with any col-*-* screen size.
This is my code right now. The image is under the textfield instead of at it's right.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<br>
<br>
<div class="col-lg-6">
<div class="input-group" style="float:left;">
<textarea class="form-control"></textarea>
<div style="float:left;"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></div>
</div>
</div>
PS: I tried to use form-inline with form-controlon the text field and the image, but it did not work. It's possible I did something incorrectly.

Answer 1

Use proper markup for input group and just override the styles you don't want:
.input-group .input-group-addon {
background-color: transparent;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<br>
<br>
<div class="col-lg-6">
<div class="input-group">
<textarea class="form-control"></textarea>
<span class="input-group-addon" id="basic-addon1"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></span>
</div>
</div>