I'm facing an issue with the height property of a specific div and I can't seem to fix it.
SCSS:
.security{
border: 3px #1D3176 solid;
display: flex;
h2{
position: absolute;
width: 25%;
left: 70%;
}
img{
position: absolute;
width: 25%;
left: 5%;
}
.intro{
position: relative;
width: 25%;
left: 70%;
top: 40px;
}
h4{
position: absolute;
width: 30%;
left: 35%;
}
.text{
position: relative;
width: 30%;
left: 10%;
top: 50px;
}
}
.human-rights{
border: 3px #1D3176 solid;
display: flex;
h2{
position: absolute;
width: 25%;
left: 5%;
}
img{
position: absolute;
left: 35%;
width: 30%;
}
.intro{
position: relative;
width: 25%;
left: 5%;
top: 40px;
}
.a{
position: absolute;
width: 25%;
left: 70%;
}
.text1{
text-align: center;
position: relative;
width: 25%;
left: 46%;
top: 50px;
}
.b{
position: absolute;
width: 25%;
left: 70%;
top: 100px;
}
.text2{
text-align: center;
position: relative;
width: 25%;
left: 20%;
top: 150px;
}
}
HTML:
<div id="sec-counc" class="security">
<h2>Security Council</h2>
<img id="sec-counc-img" src="imgs/SecCounc.png" alt="Security council committee">
<div class="intro">The SC is the only committee, which can pass legally binding
resolutions and deploy humanitarian and military missions, but it is also the
only one where some countries posses veto powers. The challenge is making the best
of the former, while working around the latter.</div>
<h4>Topic 1:</h4>
<div class="text">Resolving the political crisis in the Federal Democratic
Republic of Ethiopia relating to the uprisings in the Tigray, Oromia,
and Benishangul-Gumuz regions.</div>
</div>
<div class="human-rights">
<h2>Human Rights Council</h2>
<img src="imgs/HumanRightsCounc.png" alt="Human right council committee">
<div class="intro">The United Nations was founded on the prospect of the promotion of human rights.
Unfortunately, most member countries did not get the memo, and continue to violate the human rights.
The HCR has special authorization to launch public awareness campaigns, and send communications
(official letters, which inform of human rights violations, and encourage their stoppage, being
sent to governments, IGOs, NGOs, and companies). It is up to the delegates to make the most of
these limited tools.</div>
<h4 class="a">Topic 1:</h4>
<div class="text1">Addressing the violations of human rights caused by
inter-racial hatred especially in multi-ethnic states.</div>
<h4 class="b">Topic 2:</h4>
<div class="text2">Addressing the status of human rights of drug dealers and drug users.</div>
</div>
The borders should show the height of the elements, but they don't match as intended: I am trying to achieve the layout where the yellow picture is one element and the blue picture appears below it consistently. Hard coding the height with "npx" doesn't work due to scaling issues. Any help would be greatly appreciated.