Make Boxes same Height-CodePudding

I use Boostrap 5 and have these 4 Boxes, they are not cards. How can I get them at the same height? Content is dynamic.

You find the Codepen here: https://codepen.io/Deluxe23/pen/gOXJWwG

Below is the HTML Code with just 2 Boxes. I can't post all because that's too much code for this Post. you'll see all 4 Boxes in the Codepen.

.box>.icon {
  text-align: center;
  position: relative;
}

.box>.icon>.image {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 88px;
  height: 88px;
  border: 8px solid white;
  line-height: 88px;
  border-radius: 50%;
  background: blue;
  vertical-align: middle;
}

.box>.icon:hover>.image {
  background: #333;
}

.box>.icon>.image>i {
  font-size: 36px !important;
  color: #fff !important;
}

.box>.icon:hover>.image>i {
  color: white !important;
}

.box>.icon>.info {
  margin-top: -24px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid #e0e0e0;
  padding: 40px 0 10px 0;
}

.box>.icon:hover>.info {
  background: rgba(0, 0, 0, 0.04);
  border-color: #e0e0e0;
  color: white;
}

.box>.icon>.info>h3.title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 1.25rem;
  color: #222;
  font-weight: 500;
}

.box>.icon>.info>p {
  font-family: "Montserrat", sans-serif !important;
  font-size: 16px;
  color: #666;
  line-height: 1.5em;
  margin: 20px;
}

.box>.icon:hover>.info>h3.title,
.box>.icon:hover>.info>p,
.box>.icon:hover>.info>.more>a {
  color: #222;
}

.box>.icon>.info>.more a {
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px;
  color: #222;
  line-height: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

.box>.icon:hover>.info>.more>a {
  color: #fff;
  padding: 6px 8px;
  background-color: blue;
}

.box .space {
  height: 30px;
}

<section style="background-color:#f7f7f7">
  <div >
    <div >
      <div >
        <div >
          <div >
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
                ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >
              <h3 >BoxHeadline 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse
                  blandit quam elit, eu imperdiet neque semper</p>
              <div >
                <a href="/kontakt/" title="Title Link">
                  Mehr Informationen<i ></i>
                </a>
              </div>
            </div>
          </div>
          <div ></div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
                ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >
              <h3 >BoxHeadline 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
            </div>
          </div>
          <div ></div>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Add Class Like

<div >
        <div > /* Add Class Here*/
          <div >  /* Add Class Here*/
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:/EcctII.webp" decoding="async" ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >  /* Add Class Here*/
              <h3 >BoxHeadline 4</h3>

CodePudding user response：

Please update by this code. We make full height using height : 100%

.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: blue; vertical-align: middle; }
.box > .icon:hover > .image { background: #333; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; padding: 40px 0 10px 0; }
.box > .icon:hover > .info { border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Montserrat",sans-serif !important; font-size: 1.25rem; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Montserrat",sans-serif !important; font-size: 16px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Montserrat",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: blue; }
.box .space { height: 30px; }
.box {
    position: relative;
    height: 100%;
    background: #ddd;
}
.box:hover{background: rgba(0, 0, 0, 0.04); }
.col-6{ margin-bottom:20px;}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<section style="background-color:#f7f7f7">
  <div >
    <div >
      <div >
        <div >
          <div >
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >
              <h3 >BoxHeadline 1</h3>
              <p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper</p>
              </p>
              <div >
                <a href="/kontakt/" title="Title Link">
                  Mehr Informationen<i ></i>
                </a>
              </div>
            </div>
          </div>
          <div ></div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >
              <h3 >BoxHeadline 2</h3>
              <p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
              </p>
            </div>
          </div>
          <div ></div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >
              <h3 >BoxHeadline 3</h3>
              <p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
              </p>
            </div>
          </div>
          <div ></div>
        </div>
      </div>

      <div >
        <div >
          <div >
            <div  style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" ><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div >
              <h3 >BoxHeadline 4</h3>
              <p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
              </p>
            </div>
          </div>
          <div ></div>
        </div>
      </div>

    </div>
  </div>
</section>