I would like to place 1 label at the top of an Input with two centered buttons (inside a div) on the right.
for the moment my code isn't flexible and I can't easily use my class anywhere on my webpage as It is strongly dependent the #.bu-container height that is far more large than it should be. Also I'm not sure to have a good result when resizing even more on different browsers.
Thanks in advance for your replies,
Here is my erroneous code:
#position {
height: 500px;
}
.bu-container {
margin: 10px;
display: block;
float: left;
height: 50px;
width: 400px;
overflow: hidden;
}
.bu-container input {
float: left;
}
.bu-container .bu {
float: right;
top: 0px;
right: 50px;
padding: 1px;
}
.bu-container button {
height: 10px;
display: block;
}
<div id="Position">
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>Height</label>
<input id="LHeight" min="0" type="number" value="">
</span>
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>Width</label>
<input id="LWidth" min="0" type="number" value="">
</span>
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>X</label>
<input id="x" min="0" type="number" value="">
</span>
<span class="bu-container">
<span class="bu"> <button></button> <button></button> </span>
<label>Y</label>
<input id="y" min="0" type="number" value="">
</span>
</div>
Check this out....