<div className="formContainer">
<InputBox types={"Questions"} setText={setQuestion} submit={submit} />
<InputBox types={"Solutions"} setText={setAnswer} submit={submit} />
</div>
The code above showcases my HTML markup. InputBox is a React component that contains a text area nested within fieldsets.
.formContainer {
display: flex;
}
.inputBox {
flex: 1;
resize: none;
line-height: 30px;
border-radius: 0px;
border-style: none;
width: 100%;
max-width: 100%;
}
I aim to have two text areas aligned side by side within fieldsets with 50% width each. However, the current code results in the text areas shrinking and floating leftward. Please see the attached screenshots for reference (https://i.sstatic.net/YBoVK.png, https://i.sstatic.net/UsvZe.png). Any advice on how I can rectify this issue would be highly appreciated.