How can i prevent to start inputs at nasty way - html

Question

I want to my text box start at in line. What should I do? This my code.
<div id="middle">
<div id="left">
</div >
<div id="m">
Name: <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
Family: <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
Phone: <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
<div>
The result is:
But I want it to display like so without using space:

Answer 1

label{
width:50px;
display:inline-block
}
<div id="middle">
<div id="left">
</div >
<div id="m">
<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
adding label solve it!

Answer 2

There are quite a few improvements that you could implement into your code. I would like to help solve your problem and improve your coding standards.
First of all to solve the issue in question. First, you need to wrap your label text in an element, this will allow you to apply a width to them so they align nicely, a <label> element will be best suited.
Like so:
HTML
<label>Name:</label> <input type="text" name="y1" id="Name1"> <label style="display: none " id="Name" name="y2" >A </label><br />
<label>Family:</label> <input type="text" name="y1" id="Family1"> <label style="display: none " id="Family" name="y2" >B </label><br />
<label>Phone:</label> <input type="text" name="y1" id="Phone1"><label style="display: none " id="Phone" name="y2" >C </label><br />
CSS
label {
display: inline-block; // a label is display: inline; by default so needs to be set to display: inline-block; so it takes a new width
width: 70px;
}
This will solve the issue.
To take your code further I have some recommendations.
Try and use IDs less, it is a good practice to use classes for all styling and only use IDs when necessary for JS DOM manipulation.
<label> elements can be given a for attribute that links it to an input, meaning when you click the label it will select the input, this is better user experience.
I recommend using the BEM class naming conventions to make sure you have clear and understandable CSS class names. BEM
In your <input> elements you have the same name. This is semantically ok but only when using type="radio", for all other input types they should each have a unique name.
Try and avoid putting inline style="..." unless absolutely necessary, it is much cleaner to keep CSS inside a CSS file.
If we apply all of these you will end up with code like so:
.inputs__row {
margin-bottom: 10px;
}
.inputs__label {
display: inline-block;
width: 70px;
}
<div class="inputs">
<div class="inputs__row">
<label class="inputs__label" for="name">Name:</label>
<input type="text" class="inputs__input" name="name" id="name" />
</div>
<div class="inputs__row">
<label class="inputs__label" for="family">Family:</label>
<input type="text" class="inputs__input" name="family" id="family" />
</div>
<div class="inputs__row">
<label class="inputs__label" for="phone">Phone:</label>
<input type="text" class="inputs__input" name="phone" id="phone" />
</div>
<div class="inputs__row">
<button onclick="myFunction()">save</button>
<button onclick="myFunction1()">refresh</button>
</div>
</div>
Hope this helps.