CSS height property set incorrectly, dont know how to fix

Question

I have this problem where my height property of a certain div doesnt work as i would like to, and i have no idea how 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>

but it does this (the borders should show the height of it, as you can see they dont really fit.): What Im trying to achieve here is the yellow pic being one property and then the blue picture being under it no matter what. I tried doing it with hard coding height: npx; but it doesnt work because when i scale the width up it messes it up again. Please help me im desperate.

Answer 1

You should not use position: absolute to adjust your elements' position. That will cause a lot more problems in responsive as well as element re-positioning

Instead of that, I'd propose using flex for re-positioning

.flexbox {
  border: 3px #1D3176 solid;
  display: flex;
  padding: 1rem;
}

.flex-item {
  flex: 1 1 0;
  padding: 0 1rem;
}

.topic {
  margin: 1rem 0;
}

.center-text {
  text-align: center;
}

.intro {
  text-align: justify;
}

h4 {
  margin: 0.5rem 0;
}

img {
  width: 100%;
}

<div id="sec-counc" class="security flexbox">
  <div class="flex-item">
    <img id="sec-counc-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Emblem_of_the_United_Nations.svg/120px-Emblem_of_the_United_Nations.svg.png" alt="Security council committee">
  </div>
  <div class="flex-item">
    <h4 class="center-text">Topic 1:</h4>
    <div class="text center-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="flex-item">
    <h2 class="center-text">Security Council</h2>
    <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>
  </div>

</div>
<div class="human-rights flexbox">
  <div class="flex-item">
    <h2 class="center-text">Human Rights Council</h2>
    <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>
  </div>
  <div class="flex-item">
    <img src="https://reliefweb.int/sites/reliefweb.int/files/resources/1024px-United_Nations_Human_Rights_Council_Logo.svg_.png" alt="Human right council committee">
  </div>
  <div class="flex-item">
    <div class="topic">
      <h4 class="a center-text">Topic 1:</h4>
      <div class="text1 center-text">Addressing the violations of human rights caused by inter-racial hatred especially in multi-ethnic states.</div>
    </div>
    <div class="topic">
      <h4 class="b center-text">Topic 2:</h4>
      <div class="text2 center-text">Addressing the status of human rights of drug dealers and drug users.</div>
    </div>
  </div>

</div>

SCSS version here https://jsfiddle.net/zu08hfva/