'Not able to align divs' inside a parent div in react

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.

enter image description here

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>;
javascripthtmlcssreactjs


Solution 1:[1]

suppose your parent div has className "parent" and it has two children "child1" and "child2" so the css will look like this

.parent{
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
}

Trying applying this to the parent div , hope this solves your issue .

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hritik Sharma

Related Questions