HTML, Place divs near each other - html

Question

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>

Answer 1

Use display:inline-block; instead of float
div{
display:inline-block;
}
<div>
Title <br />
<input type="text"/>
</div>
<div>
Firstname <br />
<input type="text"/>
</div>
<div>
Surname <br />
<input type="text"/>
</div>

Answer 2

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>

Answer 3

you will need to use width and also use position:absolute so that you can move your control anywhere with margin-left:10px or margin-top:10px whatever in your case. Also it would be helpful if you share your css code for the same.

Answer 4

Better solution:
Don't use divitis for this, use labels and input fields:
HTML:
<form>
<label> Name <input type="text"> </label>
<label> Email <input type="email"> </label>
</form>
CSS:
form{display: flex}
This way you have semantic HTML and achieve the look you want.
A good overview on what can be done with flexbox is on css-tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/