displaying block of two divs on half splitted index page-CodePudding

I have a half-splitted index page. I use twitter bootstrap-v5.1.3 to split. On the left side I have two divs which have one text and one image class.

These divs are inside of flex-parent. So they are looking inline-block.

I want text on top and image on bottom which I mentioned below. But also text and image must be on center in "leftside col-md-6".

I need this:

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
  overflow-x: hidden;
}

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background-color: #8a68ff;
  opacity: 83%;
}

.rightside {
  background-color: #ffffff;
}

.left-hero-text {
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}

.bold-text {
  font-size: 55px;
  font-weight: 700;
}

img {
  width: 50%;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <span >Lorem</span> ipsum
        <span >dolor</span> sit amet
      </div>
      <img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
    </div>
  </div>
  <div >
    <div >
      Right Side
    </div>
  </div>
</div>

CodePudding user response：

You just need to change your inner flex container's direction to column.

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
  overflow-x: hidden;
}

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background-color: #8a68ff;
  opacity: 83%;
}

.rightside {
  background-color: #ffffff;
}

.left-hero-text {
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}

.bold-text {
  font-size: 55px;
  font-weight: 700;
}

img {
  width: 50%;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <span >Lorem</span> ipsum
        <span >dolor</span> sit amet
      </div>
      <img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
    </div>
  </div>
  <div >
    <div >
      Right Side
    </div>
  </div>
</div>