Flexbox align and width [closed]

I have a small problem with some divs that I need to align, currently, have this, I'm currently using MUI Box component for this:

<Box style="display: flex; flex-direction: row;"><Box><p>Div 1</p> </Box><Box><p>Div 2</p><div>content</div></Box></Box>

This is the expected result

Now the problem is that div 2 and content of div 2 are a single component and when I try to make it look like this, the div 1 take the space and looks like this:

Is there a way to make this possible? I have a couple of days working on this now.