CODEWITHSUNDEEP
htmlinput
Stephen McCormick
Stephen McCormick

Reputation: 1796

HTML Text before and after (Prefix/Suffix) Input field

I need to do have in HTML text show up before and after an input field, on the same line. The prefix and suffix are added at run time, and may or may not be there. I have tried and and combinations there of. Here is what I have now:

enter image description here

Here is what I am trying to achieve (remembering that the values will sometimes not be there, so I would like the text input recover that space when they are not there:

enter image description here

Here is my current code (I did cut out some class defs to make it more readable):

<div>
    <div>Prefix and Suffix</div>
    <div class="row">
        <span style="display:inline-block">Test<input type="text" class="input">Dollars</span>
    </div>
</div>

I would prefer a solution that does not use tables (just div) but if that is the only way to do it, so be it.

Upvotes: 1

Views: 8380

Answers (1)

Charles McIntosh
Charles McIntosh

Reputation: 661

using flex seems to work just fine for me. Might be worth a try.

   <div style="display:flex;">
       <div>Test&nbsp;</div>
       <input type="text">
       <div>&nbsp;Dollars</div>
    </div>

Upvotes: 1

Related Questions