Aligning label and input by 3:1

Question

I have inputs and labels in inside info class and I want each label and input to align by 1:3 on a single row no matter what the screen size is, plus I won't mind using flex classes, I just want a solution. Cheers

css

.info {
    border: 2px solid steelblue;
    border-radius: 10px;
    padding: 10px;
}

.info input[type = 'text']{
    margin: 10px;
    padding: 5px;
    border: 2px solid orange;
    border-radius: 10px;
}

JSX

<div className = 'form'>

    <h3 id = 'intro'>Join Us Here</h3><hr/>

    <div className = 'info'>
        <div>
            <label>Business Name:</label> <input type='text' placeholder='Business Name' />        
        </div>
        <div>
            <label>Owner Name:</label> <input type='text' placeholder='Owner Name' />
        </div>
        <div>
            <label>Receptionist Name:</label> <input type='text' placeholder='Receptionist Name' />
        </div>
    </div>

</div>

I wouldn't recommend it...SO has rules about that....and it will be detected — Paulie_D, Apr 29 '18 at 19:03
it was a fair question and i have done research. you don't know from there what i have done here — Ninja, Apr 29 '18 at 19:08

score 1 · Accepted Answer · answered Apr 29 '18 at 21:35

Although I agree on comments that you should do at least some research and this is simplest flex layout ever it's simple as adding display:flex on parent div and adding flex: 1 and flex: 3 on components.

I am sending you a working solution on codesandbox https://codesandbox.io/s/wo6z1j23ll

Aligning label and input by 3:1

1 Answers1