So I was working on an HTML SPA. I created sections and wanted each section to be horizontally split in 40:60 ratio. The problem is that when I want to vertically center content in the columns, it is a lot of white space at leaving the end of the column. This is not a big problem but after the last column a lot of white space is left which is definitely unappealing.

A snippet of my code:

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vw;
  margin: 0;
  padding: 0;
  background-color: #23272e;
  color: whitesmoke;
}

section {
  width: 100%;
  height: 100vh;
  float: left;
}

section:nth-child(2) {
  background-color: green;
}

.section-content {
  height: calc(100vh - 1.5rem);
}

.row {
  height: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  height: 100%;
  padding: 1.5rem;
  margin: 0;
}

.col-left {
  width: 40%;
  height: 100%;
  text-align: center;
}

.col-right {
  width: 60%;
  height: fit-content;
  text-align: start;
}

.col-content {
  display: inline-block;
  height: 100%;
  transform: translateY(50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

EDIT: The CSS isn’t working properly in the snippet, posting my code too.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      *,
      ::after,
      ::before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          width: 100vw;
          height: 100vw;
          margin: 0;
          padding: 0;
          background-color: #23272e;
          color: whitesmoke;
      }

      section {
        width: 100%;
        height: 100vh;
        float: left;
      }

      section:nth-child(2) {
        background-color: green;
      }

      .section-content {
        height: calc(100vh - 1.5rem);
      }

      .row {
        height: 100%;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .column {
        float: left;
        height: 100%;
        padding: 1.5rem;
        margin: 0;
      }

      .col-left {
        width: 40%;
        height: 100%;
        text-align: center;
      }

      .col-right {
        width: 60%;
        height: fit-content;
        text-align: start;
      }

      .col-content {
        display: inline-block;
        height: 100%;
        transform: translateY(50%);
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>