Here is the code snippet I am working with:
<section className="createTodo-box"> // parent
<div className="createTodo-inside"> // child
<Input
value={this.state.text}
style={{ width: '200px' }}
onChange={(e) => this.setState({ text: e.target.value })}
type='text'
placeholder='What needs to be done?'
/>
<Button onClick={() => this._confirm()} type="primary"> Create </Button>
</div>
</section>
This is how I styled it using CSS:
.createTodo-box {
border: solid #C3C3C3 1px;
width: 200px;
margin: 25px;
padding: 15px;
}
.createTodo-inside {
padding: 15px;
}
I encountered an issue where setting a padding of 15px on .createTodo-inside did not prevent my Input from overlapping on the right. See screenshot here.