HTML, Place divs near each other

I have a problem in my html code. I have "Title" , "Firstname" and "Surname" and I need an input box bellow them to be completed by users. these input boxes are defined in my form generator as fields (e.g. [en_title]) Now when I write down the html code to show the output, the blocks are placed under each other. I want to place them near each other and when I use float in my div style, they place near each other BUT the input boxes shrink, while in first case the input boxes don't shrink. Please give me a solution for this issue that the blocks placed near each other and the boxes don't shrink. thanks

<div>
  Title <br />
  [en_title]
</div>
<div>
  Firstname <br />
  [en_fname]
</div>
<div>
  Surname <br />
  [en_sname]
</div>

Solution

So you have 3 div that you want to place near each other horizontally. the width of the div which contain all these div is 100%. So each div have a 100/3 % width. It works as Bootstrap for example.

You can do that like this

Run the snippet

.your-block {
    float: left;
    width: 33.33333%;
}

<div class="your-block">
    <label for="title">Title </label> <br />
    <input id="title" type="text"/>
</div>
<div class="your-block">
    <label for="firstname">firstname </label> <br />
    <input id="firstname" type="text"/>
</div>
<div class="your-block">
    <label for="surname">surname </label> <br />
    <input id="surname" type="text"/>
</div>