Is there a way to place two elements side by side, with one of them (the textarea) always being 100% height of the window? I've looked at similar questions here but can't figure out how to make it work. Can you help me with this?
html:
<div style={styles.rowEqHeight}>
<div style={styles.component}>
<div className='input-group'>
<textarea id='textarea'
className='form-control'
onChange={this.onDataChange}
placeholder='Type your data...'></textarea>
</div>
</div>
<div style={styles.component}>
<Treebeard data={this.state}
decorators={decorators}
onToggle={this.onToggle}/>
</div>
styles.js
export default {
component: {
width: '50%',
display: 'inline-block',
verticalAlign: 'top',
padding: '20px',
},
rowEqHeight: {
display: '-webkit-box',
display: '-webkit-flex',
display: '-ms-flexbox',
display: 'flex'
}
};