CODEWITHSUNDEEP
css
Wieschie
Wieschie

Reputation: 499

Align two element rows by second element

I have rows consisting of two elements that I'd like to align by the second element (they're input boxes, and it's nice to have them all line up vertically). The solution I behaves exactly how I want when the elements fit onto one line, I don't want to be using the width of the first element to set the horizontal position. This starts to act weird in small windows or on mobile (when the width of the label is more than 45% of the screen it starts wrapping again).

What would be the proper way to achieve the same result?

FIDDLE

HTML:

<label>Test</label>
<input type="number" value="0">
<br />
<label>Test longer</label>
<input type="number" value="0">
<br />
<label>Test longest text</label>
<input type="number" value="0">
<br />

CSS:

label {
    display: inline-block;
    float: left;
    width: 45%;
    text-align: right;
    padding: 2px;
    margin: 2px;
}
input {
    display: inline-block;
    float: left;
    width: 200px;
    padding: 2px;
    margin: 2px;
}

Upvotes: 1

Views: 183

Answers (1)

Sanjeev
Sanjeev

Reputation: 4375

You can use flex properties to display rows and columns and remove float 

<div class="flex">
    <label>Test</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longer</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longest text</label>
    <input type="number" value="0">
</div>

in css

.flex {
    display:flex;
}

label {
    width: 45%;
    text-align: right;
    padding: 2px;
    margin: 2px;
}
input {
    width: 200px;
    padding: 2px;
    margin: 2px;
}

@media(max-width:200px){
    .flex{
        display:block;
    }
}

and use media queries for screen below 200px(or your preference) to make the text and input appear vertically

Upvotes: 3

Related Questions