I am working on creating a layout with rows and columns where the content in each column is vertically aligned.
Here is an example of what I am trying to achieve:
Currently, I am using react and have multiple components. The approach I believe will work to keep "a" and "b" in the same row is:
.container {
display: flex;
flex-direction: row;
}
.content {
display: flex;
flex-direction: column;
}
For the container class:
const Field2 = (props) => {
return (
<div className={"container"}>
{props.texturasEscolhidas.map(a => {
return (
<Field2Content>
{a.labelNormalize}
{a.name}
</Field2Content>
)
})}
</div>
)
};
export default Field2;
For the content class:
const Field2Content = (props) => {
return(
<div className={"content "}>
{props.children}
</div>
)
};
export default Field2Content;