I've been struggling to align text next to an image inside a box.
Desired outcome
CSS:
#roundedBox {
border-radius: 25px;
background: #363636;
width: auto;
height: auto;
margin: 10%;
display: flex;
position: relative;
}
#aboutUsImage {
max-height: 480px;
margin-right: 3%;
margin-left: 4%;
margin-top: 2%;
margin-bottom: 2%;
border-radius: 5%;
}
#aboutUsTitle {
font-size: 20px;
padding-top: 10%;
text-align: left;
}
#aboutUsText {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: 30%;
text-align: left;
}
#aboutUsText2 {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: 30%;
margin-top: 10px;
padding-top: 30px;
text-align: left;
}
Javascript:
<Grid id="roundedBox">
<Image id= "aboutUsImage" src={aboutUs} />
<Box>
<Heading id = "aboutUsTitle"> About us</Heading>
<Text id = "aboutUsText"> Founded in 2021, Coded Solution aims to create a secure underlying infrastructure platform for blockchain databases through consensus algorithms of the innovative supernode PoS consensus mechanism.</Text>
<Text id = "aboutUsText2"> This creates solutions for everything including smart contract, wallet, explorer, app, frontend and backend, which is unique in the current market.</Text>
</Box>
</Grid>
Result: Huge space on the right side of the code
The outcome shown above is not ideal as there is excessive spacing next to the title and its corresponding paragraph.