Here is the picture. I want to align the div's (with blue border) from top. I just want the CSS code for this. I tried to use margin but its not working. Also when more content is inserted inside these div's they expand from bottom to top, seems like bottom for these div's is fixed or something.

what I want is that the Inner div's (with blue border) should be top aligned not bottom aligned and when more text is added inside these div's it should expand from top top to bottom.

here is the CSS code. propertiesContainer class is the parent div with red border and properties class are the inner div's

propertiesContainer: {
  paddingTop: "26px",
  background: " #EAEAFA",
  border: "1px solid red",
  opacity: 1,
},
properties: {
  bottom: "100px",
  margin: "19px",
  width: "auto",
  border: "2px solid blue",
  height: "262px",
},

Reactjs code for 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>;