How to use antd divider to separate two sides of the screen in a react component?

by

I am using antd and would like the vertical divider to split the two sides of my screen. The two sides are in fact separated by different Col components. They currently look something like this:

 class Example extends React.Component {
   render () {
     return (
      <Row>
        <Col span={11}>
          CONTENT ONE SIDE
        </Col>
        <Col>
          <Divider type='vertical'/>
        </Col span={2}>
        <Col span={11}>
          CONTENT OTHER SIDE
        </Col>
      </Row>
     )
   }
 }

The issue here is that the Divider is barely appearing. I would like it to go all the way down where the content ends. Instead, it is just a tiny little line.

This is a screenshot of what it currently looks like:

enter image description here

You can barely see the divider in the middle.

How can I make the vertical divider be as long as the content?

Thanks!

111 thoughts on “How to use antd divider to separate two sides of the screen in a react component?”

  20. Howdy very cool blog!! Man .. Beautiful .. Superb .. I’ll bookmark
    your site and take the feeds additionally?
    I’m satisfied to search out so many helpful information right here in the post, we want work out extra techniques in this regard, thanks for sharing.
    . . . . .

    Reply

Leave a Comment