Looking for help with aligning the divs with blue borders at the top? I need CSS code to achieve this. I tried using margin but it didn't work as expected. Also, when more content is added inside these divs, they seem to expand from the bottom to the top instead of the top to bottom.
I want the inner divs with blue borders to be aligned at the top and expand downwards when more text is inserted.
https://i.sstatic.net/EamGn.png
https://i.sstatic.net/IJIBE.png
Below is the CSS code. The parent div with red border has a class of propertiesContainer, while the inner divs have a class of properties.
propertiesContainer: {
paddingTop: "26px",
background: " #EAEAFA",
border: "1px solid red",
opacity: 1,
},
properties: {
bottom: "100px",
margin: "19px",
width: "auto",
border: "2px solid blue",
height: "262px",
},
Here is some Reactjs code related to this:
<section className={classes.propertiesContainer}>
<HorizontalScroll
itemClass="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
data={
mobile_footer_data &&
mobile_footer_data.map((data, index) => {
const { header, body } = data;
console.log("dataa", data);
const text = body.map((item, index) => {
return <div key={index}>{item}</div>;
});
return (
<div key={index} className={classes.properties}>
<CommonHeaderText
text={<span>{header}</span>}
variant="h1"
style={{
fontSize: "16px",
fontWeight: "bold",
fontFamily: "Open Sans",
color: "##363636",
height: "19px",
marginBottom: "25px",
}}
/>
<div>{text}</div>
</div>
);
})
}
/>
</section>;