Flex Layout not responding properly in reactJs - html

Question

Currently what Im trying to achieve is this:
But I tried this using flex attribute but the layout is messed up. Here is my code for the same.
<div className="contact-container" style={{flexDirection:"row",backgroundColor:"#ECECEC"}}>
<div style={{padding:"30px"}}>
<div style={{flexDirection:"column"}}>
<p style={{color:"#0E2043",backgroundColor:"#ECECEC", fontSize:"22px",fontWeight:"700", textAlign:"justify"}}>If you are looking to enjoy exactly these benefits, Passport Legacy is here to assist you with your second citizenship. </p>
<p style={{color:"#0E2043", paddingTop:"30px",backgroundColor:"#ECECEC", textAlign:"justify"}}>If you would like more information about any of the qualifying programs, or our services, please do not hesitate to contact us.</p>
</div>
</div>
<div style={{padding:"30px"}}>
<div>
<div style={{padding:"5px"}}>
<input style={{padding:"5px", width:"100%"}} type="text" placeholder="Name"/>
</div>
<div style={{width:"100%",display:"flex", flexWrap:"wrap", justifyContent:"space-between"}}>
<div style={{padding:"5px"}}>
<input style={{padding:"5px",width:"100%"}} type="text" placeholder="email"/>
</div>
<div style={{padding:"5px"}}>
<input style={{padding:"5px",width:"100%"}} type="text" placeholder="phone"/>
</div>
</div>
<div style={{padding:"5px"}}>
<input style={{padding:"5px", width:"100%"}} type="text" placeholder="Subject"/>
</div>
<div style={{padding:"5px"}}>
<textarea style={{padding:"5px", width:"100%"}} rows="4" placeholder="Message"/>
</div>
</div>
</div>
</div>
Ive added a sandbox too, Please feel free to make changes.
https://codesandbox.io/s/divine-dawn-l27wy?file=/src/App.tsx:71-1766

Answer 1

Here is your code with a little changes, I made it responsive too for width less than 400px.
const App=()=>{
return(
<div className="contact-container" style={{backgroundColor:"#ECECEC"}}>
<div style={{padding:"30px"}}>
<div style={{flexDirection:"column"}}>
<p style={{color:"#0E2043",backgroundColor:"#ECECEC", fontSize:"22px",fontWeight:"700", textAlign:"justify"}}>If you are looking to enjoy exactly these benefits, Passport Legacy is here to assist you with your second citizenship. </p>
<p style={{color:"#0E2043", paddingTop:"30px",backgroundColor:"#ECECEC", textAlign:"justify"}}>If you would like more information about any of the qualifying programs, or our services, please do not hesitate to contact us.</p>
</div>
</div>
<div style={{padding:"30px"}}>
<div>
<div style={{padding:"5px"}}>
<input style={{padding:"5px", width:"100%"}} type="text" placeholder="Name"/>
</div>
<div style={{width:"100%",display:"flex", flexWrap:"wrap", justifyContent:"space-between"}}>
<div style={{padding:"5px"}}>
<input style={{padding:"5px",width:"100%"}} type="text" placeholder="email"/>
</div>
<div style={{padding:"5px"}}>
<input style={{padding:"5px",width:"100%"}} type="text" placeholder="phone"/>
</div>
</div>
<div style={{padding:"5px"}}>
<input style={{padding:"5px", width:"100%"}} type="text" placeholder="Subject"/>
</div>
<div style={{padding:"5px"}}>
<textarea style={{padding:"5px", width:"100%"}} rows="4" placeholder="Message"/>
</div>
</div>
</div>
</div>
)}
ReactDOM.render(
<App />,
document.getElementById("react")
);
.contact-container {
display: flex;
flex-direction: row;
}
.contact-container > div {
width:50%;
}
#media (max-width: 400px) {
.contact-container {
flex-direction: column;
}
.contact-container > div {
width:100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

All you have to do is specify the "width" for the "div" on the left.
<div style={{padding:"30px", width:"50%"}}>

Answer 3

First of all it is not a ReactJS issue. It is just you are not configuring the flexbox propertly.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.container {
width: 90%;
display: flex;
max-width: 500px;
flex-direction: column;
border: 1px solid red;
}
.container input,
.container textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #e5e5e5;
}
.container input {
margin-top: 1rem;
}
.container .flex {
display: flex;
justify-content: space-between;
}
.container .flex input:nth-child(2) {
margin-left: 1rem;
}
.container textarea {
display: block;
margin-top: 1rem;
}
<div class="container">
<form>
<input type="text" placeholder="Name" />
<div class="flex">
<input type="text" placeholder="Email">
<input type="text" placeholder="Phone">
</div>
<input type="text" placeholder="Subject">
<textarea id="" cols="20" rows="10"></textarea>
</form>
</div>
Let me know if this works? 😊