Limiting the width of an html block to that of a sibling - html

Question

I'm working on my portfolio, and I'm trying to add some bio text. I want everything to be aligned with my name. I've been successful at making a short tagline line up, but when I add a block with a lot of text, everything aligns to that block, or to the parent.
How can I restrict the width of the parent ( to that of the headline
I've put together a Codepen to demonstrate what I mean.
I'd preferably like to do it without JS
Snippet (doesn't look great in the small window):
header {
display: inline-block;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-contents {
margin: auto;
max-width: 920px;
}
header .header-contents .title {
display: inline-block;
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
.bio-text {
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-contents">
<div class="title">
First Lastname
<div class="tagline">
Tagline goes here
</div>
<!-- putting .bio-text here moves the tagline to the right margin -->
</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</header>

Answer 1

Try to use flex:
HTML:
header {
display: flex;
flex-direction: row;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-space {
flex: 1;
}
header .header-contents {
flex: 0;
margin: auto;
max-width: 960px;
}
header .header-contents .myname {
white-space: nowrap;
}
header .header-contents .title {
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
header .bio-text {
width: inherit;
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-space"></div>
<div class="header-contents">
<div class="title">
<div class="myname">
First Lastname
</div>
<div class="tagline">Tagline goes here</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</div>
<div class="header-space"></div>
</header>