Aquí está la foto. Quiero alinear los div (con borde azul) desde arriba. Solo quiero el código CSS para esto. Intenté usar el margen pero no funciona. Además, cuando se inserta más contenido dentro de estos div, se expanden de abajo hacia arriba, parece que la parte inferior de estos div está arreglada o algo así.

lo que quiero es que los div internos (con el borde azul) se alineen en la parte superior, no en la inferior, y cuando se agregue más texto dentro de estos div, se debe expandir de arriba a abajo.

aquí está el código CSS. La clase propertiesContainer es el div principal con borde rojo y la clase de propiedades son los div internos

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

código Reactjs para esto

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