Centering multiple items in flexbox not working as expected [duplicate]

I am trying to vertically content within a div with flexbox, so that it always remains centered.

However it is not working as expected. Interested to see where I'm going wrong.

Just to confirm, the 'left div' should display the contents in regular vertical order, not horizontally as is currently happening.

HTML

<section>
        <div class="left">
            <h2>Very long title</h2>
            <p>Caption goes here</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
        
        </div>
        <div class="right">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
        </div>
        
    </section> 

CSS

section {
  display:flex; 
}

div {
  padding:12px;
  width:400px;
  height:300px;
  display:flex;
  align-items:center;
}

Link to codepen



Read more here: https://stackoverflow.com/questions/65718054/centering-multiple-items-in-flexbox-not-working-as-expected

Content Attribution

This content was originally published by Adam at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: