I have tried to simplify my problem into the below snippet - my real project is using React but this should demonstrate the issue:
.page-container {
margin-left: 3rem;
}
.heading-tab {
height: 72px;
width: 294px;
border-top: 1px solid lightgrey;
}
.heading-text {
padding-top: 22px;
padding-bottom: 22px;
padding-left: 32px;
margin-bottom: 0px;
font-size: 16px;
font-weight: bold;
}
.row-group {
display: flex;
border-bottom: 1px solid;
justify-content: space-between;
padding-top: 0.8rem;
padding-bottom: 0.4rem;
}
.row-content {
padding: 0.25rem;
padding-right: 24px;
min-width: 200px;
width: 200px;
}
<div class="page-container">
<div class="heading-tab">
<p class="heading-text">
Heading 1
</p>
<div>
<div class="row-group">
<div class="row-content">My name is CTS and my alignment is all wrong!</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
What I want to do is display my row-group
(and it's contents) horizontally level with the heading-tab
- as you can see it currently sits below but I need it to set just at the end of my heading-tab
div?
CodePudding user response:
Flexbox on the heading tab should work.
.page-container {
margin-left: 3rem;
}
.heading-tab {
height: 72px;
display:flex;
justify-content: space-between;
align-items:flex-start;
border-top: 1px solid lightgrey;
}
.heading-text {
padding-top: 22px;
padding-bottom: 22px;
padding-left: 32px;
margin-bottom: 0px;
font-size: 16px;
font-weight: bold;
}
.row-group {
display: flex;
border-bottom: 1px solid;
justify-content: space-between;
padding-top: 0.8rem;
padding-bottom: 0.4rem;
}
.row-content {
padding: 0.25rem;
padding-right: 24px;
min-width: 200px;
width: 200px;
}
<div class="page-container">
<div class="heading-tab">
<p class="heading-text">
Heading 1
</p>
<div>
<div class="row-group">
<div class="row-content">My name is CTS and my alignment is all wrong!</div>
</div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>