How to place two blocks in the center of the page dividing it in half between them?

I have a central part of the page.

I want it to be like in the picture. However, I can't set 2 blocks so that they divide the page in half between them.
In place of this, the text cuts off the image.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper {
  display: inline-flex;
  flex: 1;
}

.text__main {
  padding: 10px;
  min-width: 10%;
}

.img__central {
  height: 800px;
  width: auto;
}

img {
  width: 100%;
  /* Ширина изображений */
  height: 100%;
  /* Высота изображении */
  object-fit: cover;
  /* Вписываем фотографию в область */
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}

<!-- language: lang-html -->

<div>
  <div class="wrapper">
    <div class="text__main">
      <h1>Умное образование</h1>
      <span>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non dolorem, autem reiciendis quibusdam mollitia consequatur similique sapiente quia nisi eos optio voluptatibus rem ut voluptates quaerat ad eaque in labore?
            </span>
      <button><a href="">НАчать обучение</a></button>
    </div>
    <div class="img__central ">
      <img src="/assets/img/mainslider/02.jpg" alt="">
    </div>
  </div>
</div>

<!-- end snippet -->

You can use flex-grow which will give two elements with the same value the same space. There is shortcut for flex-grow: flex: <flex-grow> <flex-shrink> <flex-basis>; <br><https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow>

.text__main {
  padding: 10px;
  min-width: 10%;
  flex: 1;
}

.img__central {
  height: 800px;
  width: auto;
  flex: 1;
}

Use a flexbox. Adjust margins/padding as it fits you.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper {
  display: flex;
  justify-content: space-between;
}

.text__main {
  padding: 10px;
  width: 50%;
}


.img__central {
  width: 50%;
}

img {
  width: 100%;
  /* Ширина изображений */
  height: 100%;
  /* Высота изображении */
  object-fit: cover;
  /* Вписываем фотографию в область */
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
  width: 50;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}

<!-- language: lang-html -->

<div>
  <div class="wrapper">
    <div class="text__main">
      <h1>Умное образование</h1>
      <span>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non dolorem, autem reiciendis quibusdam mollitia consequatur similique sapiente quia nisi eos optio voluptatibus rem ut voluptates quaerat ad eaque in labore?
            </span>
      <button><a href="">НАчать обучение</a></button>
    </div>
    <div class="img__central ">
      <img src="/assets/img/mainslider/02.jpg" alt="">
    </div>
  </div>
</div>

<!-- end snippet -->

Bootstrap framework is used.

In the below example If you want that responsiveness that if width of screen is below 576px the column width will be of 100% and if screen width is greater the 576px the row will have two columns 50%(1st column) and %50(2nd column) the use :
<br>

div class="col-sm-12 col-md-6"

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.text__main {
  padding: 10px;
  min-width: 10%;
}

.img__central {
  height: 800px;
  width: auto;
}

img {
  width: 100%;
  /* Ширина изображений */
  height: 100%;
  /* Высота изображении */
  object-fit: cover;
  /* Вписываем фотографию в область */
}

h1 {
  font-size: 56px;
}

span {
  font-size: 30px;
}

button {
  width: 100%;
  font-size: 30px;
  border-radius: 20px;
  background-color: blue;
}

<!-- language: lang-html -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <h2>HELLO WORLD</h2>
    <div class="col-sm-6">
      <span>
        Install Bootstrap’s source Sass and JavaScript files via npm,                 RubyGems, Composer, or Meteor. Package managed installs don’t include         documentation or our full build scripts. You can also use our npm             template repo to quickly generate a Bootstrap project via npm.
      </span>
    </div>
    <div class="col-sm-6">
      <img/>
    </div>
  </div>
</div>

<!-- end snippet -->