Fixed placeholder bootstrap
<p>I am looking for the best way to do (with bootstrap) this kind of placeholder. you can write at right part of the placeholder, meanwhile the placeholder holds the text. </p>

<p>I want something like: 
<a href="https://i.stack.imgur.com/4WqFU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4WqFU.png" alt="enter image description here"></a></p>

<p>With bootstrap, you can do it with:</p>

<pre><code>&lt;div class="input-group"&gt;
   &lt;div class="input-group-addon"&gt;Text&lt;/div&gt;
   &lt;input id="name" type="text" class="form-control" name="text" value="text" placeholder="Additional Info"&gt;
&lt;/div&gt;
</code></pre>

<p>With the result:</p>

<p><a href="https://i.stack.imgur.com/6UX7c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6UX7c.png" alt="enter image description here"></a></p>

<p>Does someone know how to do it? I guess the best option is css styling, but maybe is there a plugin or something any quick way.</p>