Flexbox wont fill the content area - html

Question

Not sure if flexbox is the correct way of going about this, but basically I am looking for a 2 column flexbox.
In the first part I want to put random text in and the width of this part will adapt and become the same size as the text (whatever the text is).
The second part is a dotted hr line, which I want it to basically take up whatever space is remaining on the right-hand side.
Then there'll be a 16px gap in between. Is this the correct way to go about it? Where am I going wrong?
Thanks for any help, much appreciated !
what i want to happen
Edit: Thanks to everyone who answered, they all worked great tbh, but the solution I chose allowed for some extra flexibility. Again, appreciate everyones time, I don't have enough 'reputation' to upvote everybody! =)
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
width: 100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>

Answer 1

There are a couple of issue with the implementation. You are heading to the right direction but just need a little bit of a tweak
First of all, remove the width 100% on the h2-box and the dot box.
Add flex-grow: 1; to the dot box and you are good. This will force the element to span the rest of the remaining width.
I am not sure what is expected if your title is more than 1 line long but something to think about for you.
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
Not sure if you meant to set inline-flex, but display flex works just fine.
flex-direction defaults to row so this is not needed
flex-wrap defaults to nowrap so this is also not needed
I am also unsure where you want the dotted line with regards to the title on the left but you can align that vertically with ease using align-items. I have used this in the example below to align the dots to the bottom using align-items: flex-end;
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: flex;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: flex-end;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
flex-grow: 1;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>

Answer 2

Remove width: 100%; on .h2-box and use either flex: none; or flex: 0 0 auto;.
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: center;
}
.h2-box {
flex: none;
/*flex: 0 0 auto;*/
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>

Answer 3

I have another solution... Choose what is better!
You can remove the after your . You will have only the class .h2-box to make the style of your title.
After, you can use the styles for .h2-box :
flex-basis: content;
white-space: nowrap;
width:100%;
The CSS Flexbox property flex-basis lets you specify the desired initial size of a flex item before downsizing or redistributing the remaining space in their Flexbox container.
So you'll have :
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
flex-basis: content;
white-space: nowrap;
width:100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<h2 class="h2-box">This is a title sentance</h2>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>

Answer 4

Don't set any widths from .h2-container down, display: flex; will take care of that. Control the size of the flexbox by setting widths, margins, and paddings on the parents, it will fill the parent width. You want the flexbox child that will fill the available space to have flex-grow: 1;.
body {
background-color: #f0f0f0;
color: #34363e;
}
.main {
height: 100%;
width: 100%;
padding: 64px 0;
}
.container {
height: 100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: flex;
padding: 0 32px;
gap: 16px;
}
.h2-container .grow {
flex-grow: 1;
}
.h2-container h2 {
font-size: 27px;
}
.h2-container hr {
margin-top: 40px;
border: none;
border-top: 4px dotted #cccccc;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div>
<h2>This is a title sentence</h2>
</div>
<div class="grow">
<hr>
</div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>