Flexbox display issue with second div when using center - html

Question

I'm using flexbox to center align a div within a div. I'm adding a third div within the second div that I want underneath the second and to float to the right of the size of the second div. If I set it to float right, it's still being forced into the second div. How can I force it below the second div and float it right like below?
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.welcometxt {
width: 450px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: justify;
}
.linksect {
width: 400px;
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<div class="w3-row w3-margin w3-container w3-white w3-padding-32">
<p class="cursive welcome w3-center">Welcome to the Historic Players Playhouse, home of The Players, founded in 1911.</p>
<hr class="w3-padding-large">
<div class="welcometxt">
<p>The Players is an organization of gentlemen dedicated to the preservation of amateur theater. Our members come from diverse backgrounds and locations but share a common interest in amateur theater. We welcome as members all gentlemen who wish to share
in the camaraderie of The Players.</p>
<div class="linksect">
Read More <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span>
</div>
</div>
</div>

Answer 1

You can add flex-direction: column; to your welcometxt, change the width of linksect to 100% and align its content to the right:
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.welcometxt {
width: 450px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: end;
text-align: justify;
flex-direction: column;
}
.linksect {
width: 100%;
text-align: right;
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<div class="w3-row w3-margin w3-container w3-white w3-padding-32">
<p class="cursive welcome w3-center">Welcome to the Historic Players Playhouse, home of The Players, founded in 1911.</p>
<hr class="w3-padding-large">
<div class="welcometxt">
<p>The Players is an organization of gentlemen dedicated to the preservation of amateur theater. Our members come from diverse backgrounds and locations but share a common interest in amateur theater. We welcome as members all gentlemen who wish to share
in the camaraderie of The Players.</p>
<div class="linksect">
Read More <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span>
</div>
</div>
</div>

Answer 2

You don't need flex to take paragraph at the center, having already margin: 0 auto;
.welcometxt {
width: 450px;
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: justify;
}
than:
.infolink {
float:right;
}
.linksect {
width: 400px;
float:right;
http://jsfiddle.net/9dhw5zLp/
}

Answer 3

And heres the version free of flexbox, as you asked. Html stays the same as you posted :)
.welcome, .welcometxt, .linksect{
display: block;
margin: 0 auto;
}
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
}
.welcometxt {
width: 450px;
}
.linksect {
width: 400px;
text-align: right;
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}

Answer 4

You can do it like this:
.welcome {
font-size: 2.3em;
line-height: 1.15;
font-weight: bold;
width: 600px;
display: flex;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.welcometxt {
width: 450px;
display: flex; /* displays children inline */
flex-direction: column; /* stacks children vertically */
margin: 0 auto;
align-items: center;
justify-content: center;
text-align: justify;
}
.linksect {
width: 100%; /* modified */
display: flex; /* added */
justify-content: flex-end; /* horizontal alignment, aligns them to the far right */
align-items: center; /* vertical alignment / centering */
}
.cursive,
.infolink {
font-family: 'Marck Script', cursive;
}
.infolink,
.infoarrow {
color: #8d0700;
font-weight: bold;
text-decoration: none;
font-size: 2em;
}
.infoarrow {
font-size: 1.5em;
padding-left: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<div class="w3-row w3-margin w3-container w3-white w3-padding-32">
<p class="cursive welcome w3-center">Welcome to the Historic Players Playhouse, home of The Players, founded in 1911.</p>
<hr class="w3-padding-large">
<div class="welcometxt">
<p>The Players is an organization of gentlemen dedicated to the preservation of amateur theater. Our members come from diverse backgrounds and locations but share a common interest in amateur theater. We welcome as members all gentlemen who wish to share
in the camaraderie of The Players.</p>
<div class="linksect">
Read More <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span>
</div>
</div>
</div>