将标签和输入对齐3：1

Question

我在内部信息类中有输入和标签，我希望每个标签和输入在一行上以1：3对齐，无论屏幕尺寸如何，加上我不介意使用flex类，我只想要一个解决方案。干杯

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>

Answer 1

虽然我同意你应该做至少一些研究的评论，这是最简单的flex布局，但是在父div上添加display:flex并在组件上添加flex: 1和flex: 3很简单

我发送一个有关codeandbox的工作解决方案 https://codesandbox.io/s/wo6z1j23ll