Styling Issue with flex box, text going too far

user_15302123 0
Viewed 72

I have attached image below that shows that the flex box is going too far, I want to shift Hello in the grey row to be inline with the bottom Hello.

I tried applying a flex-wrap but it did not work and making the display inline-block

enter image description here Code

<Pane display="flex" marginBottom={8}>
    <Pane display="flex" flexDirection="column" marginRight={16}>
        <Heading color={inProgressBar} size={900}>
           {XX}
        </Heading>
        <Heading flexWrap="wrap" size={100}>
           {Hello Hello Hello}
        </Heading>
    </Pane>
</Pane>
reactjs css html javascript
2 Answers

You can use position: absolute to position the Hello wherever you want, by specifying the left and right values.

user_160582440

Try align-self: flex-end; on the Hello element.

user_148478450
Related