I have three boxes say A, B & C which are inside some div having property display: flex and justify-content: space-between. I want to align boxes A to the left and boxes B & C to the right.
//JSX
const boxData = [{name: A},{name: B, className: 'button-b'},{name: C}]
<div className="conatiner">
boxData.map((box) => {
const { name, className } = box;
return(
<box className={className}>{name}</box>
)
}
</div>
//CSS
.container{
display: flex;
justify-content: space-between;
}
Here I want to move the boxes b & c to the left having some space in between.
I really appreciate any help you can provide.
I am trying to pass a specific class name with some CSS properties that will help achieve the layout which I want.
