How to position a large number of elements using flexbox without resorting to position: absolute?

Question

I'm doing a landing page for testing flexbox technology. I ran into a problem: I can't figure out how to position a large number of elements without resorting to crutches like this:

Also without resorting to position:absolute, because there will be inaccuracies in the margins or it will take a very long time to calculate these margins.

This is what I currently have:

On the second one, I indicated how I see one of the working implementation options: organize two columns in footer and make them flex-direction: column.

Here is my markup:

<footer class="footer">
  <div class="footer__logo">
    <img src="icons/Logo.svg" alt="logo" class="logo__img">
    <p class="logo__text"> PETWORLD </p>
  </div>
  <div class="footer__input">
    <label for="email" class="text">Updates right to your Inbox</label>
    <input type="email" placeholder="Email Address" class="text">
    <input type="submit" value="Send" class="submit__text text">
  </div>

  <div class="footer__privacy">
    <p class="privacy__text"> Text</p>
    <p class="privacy__text"> Text</p>
    <p class="privacy__text"> Text</p>
  </div>

  <div class="footer__menu">
    <!-- x3 колонки текста -->
    <div class="menu__text">
      <p class="text">Text</p>
      <p class="text">Text</p>
      <p class="text">Text</p>
    </div>
  </div>

  <div class="footer__social">
    <img src="icons/Socials icons.svg" alt="" class="logo__img">
  </div>
</footer>

Answer 1

I decided to move away from BEM a bit and divided my footer into two visual components.

What came out in the end can be viewed below: https://codepen.io/productomar/pen/ZEvNQjG

------------------HTML---------------------

<div class="container__footer">
            <footer class="footer">
                <div class="first__half">
                    <div class="footer__logo">
                        <img src="icons/Logo.svg" alt="logo" class="logo__img">
                        <p class="logo__text"> PETWORLD </p>
                    </div>

                    <div class="footer__input">
                        <label for="email" class="text">Updates right to your Inbox</label>
                        <input type="email" placeholder="Email Address" class="placeholder__text">
                        <input type="submit" value="Send" class="submit__text text">
                    </div>

                    <div class="footer__privacy">
                        <p class="privacy__text"> © PETWORLD 2022</p>
                        <p class="privacy__text"> Privacy policy</p>
                        <p class="privacy__text"> Terms of use</p>
                    </div>
                </div>
                <div class="second__half">
                    <div class="footer__menu">
                        <div class="menu__text">
                            <p class="text menu__b" style="font-weight: 600;">Our story</p>
                            <p class="text__item text">FAQ</p>
                            <p class="text__item text">Contact</p>
                        </div>
                        <div class="menu__text">
                            <p class="text menu__b" style="font-weight: 600;">Pet care</p>
                            <p class="text__item text">Treatments</p>
                            <p class="text__item text">Health</p>
                            <p class="text__item text">Hygiene </p>
                        </div>
                        <div class="menu__text">
                            <p class="text menu__b" style="font-weight: 600;">Shop</p>
                            <p class="text__item text">Pet Food</p>
                            <p class="text__item text">Toys</p>
                            <p class="text__item text">Accessories</p>
                        </div>
                    </div>

                    <div class="footer__social">
                        <img src="icons/Socials icons.svg" alt="logo__social" class="logo__social">
                    </div>
                </div>
            </footer>
        </div>

------------------CSS---------------------

        /* ?????? ????? ?????? */
    .first__half {
        display: flex;
        flex-direction: column;
    }
    
    .footer {
        display: flex;
        padding: 70px 80.5px;
    }
    
    .footer__logo {
        display: flex;
        align-items: center;
    }
    
    .logo__text {
        font-weight: bold;
    }
    
    .footer__input {
        margin-top: 75px;
    }
    
    label {
        display: block;
    }
    
    input[type="email"] {
        border: 1px solid #D0D0D0;
        border-radius: 10px;
        margin-top: 12px;
    }
    
    .placeholder__text {
        padding-top: 11px;
        padding-bottom: 11px;
        padding-left: 20px;
        padding-right: 71px;
        font-size: 18px;
        color: #2D2D2D;
    }
    
    .submit__text {
        padding: 11px 31.5px;
        background-color: #3366FF;
        color: white;
        border-radius: 10px;
        margin-left: 20px;
    }
    
    .footer__privacy {
        display: flex;
        margin-top: 33px;
    }
    
    .privacy__text {
        margin-right: 30px;
        font-weight: 600;
    }
    
    .privacy__text:nth-child(3) {
        margin-right: 0px;
    }
    /* ?????? ????? ?????? */
    
    .second__half {
        margin-left: 233px;
    }
    
    .footer__menu {
        display: flex;
    }
    
    .menu__text {
        margin-right: 60px;
    }
    
    .text__item {
        padding-top: 16px;
    }
    
    .menu__text:nth-child(3) {
        margin-right: 0px;
    }
    
    .footer__social {
        margin-top: 99px;
    }
    
    .logo__social {
        margin-left: 237px;
    }