My section has two columns centered in flexbox, but the container doesn't wrap around them as expected and instead fills the whole page.
How can I make the section wrap around the text with a padding of 1rem?
body {
background-color: #444;
color: white;
}
section {
border-style: solid;
border-image: linear-gradient(to top right, goldenrod 0%, transparent 25%, transparent 75%, goldenrod 100%) 2;
display: flex;
padding: 1rem;
justify-content: center;
align-items: center;
width: auto;
}
section>div {
display: flex;
flex-direction: column;
}
section>div:first-child {
border-right: 2px solid goldenrod;
padding-right: 1rem;
align-items: flex-end;
}
section>div:not(:first-child) {
padding-left: 1rem;
}<section>
<div>
<p>Line First</p>
<p>Line Second</p>
</div>
<div>
<p>Line First</p>
<p>Line Second</p>
</div>
</section>JSFiddle: https://jsfiddle.net/mjp1qozs/3/