how i want it to look like

how it looks right now

.row2 {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
}

.til-col {
  flex-basis: 32%;
  border: 7px solid #c9c9c9;
  border-radius: 30px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  padding: 40px;
  box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
  flex-direction: column;
  align-items: center;
}

.til-col img {
  width: 50%;
  border-radius: 10px;
  padding-bottom: 5%;
}

.button {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin: 12px 34px;
  border-radius: 10px;
  font-size: 13px;
  padding: 0 20px;
  background: #012a5d;
  position: relative;
  cursor: pointer;
}

<div >
  <div >
    <img src="images/Home/Layer 2-2.svg">
    <p>Interact with a TIL timeline showing key moments and events over the years</p>
    <a href="classroom.html" >
      <h3>TIL Story</h3>
    </a>
  </div>
  <div >
    <img src="images/Home/Progress.svg">
    <p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
    <a href="classroom.html" >
      <h3>Projects</h3>
    </a>
  </div>
  <div >
    <img src="images/Home/Report_icons-02 1.svg">
    <p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
    <a href="classroom.html" >
      <h3>Classroom Redesign</h3>
    </a>
  </div>
</div>

I want to make the image of each box aligned with each other, same with the text and the button, like it is presented in the image. Yet everything would follow right after the image, the text ends. I also want to uniform the size of the image, without messing up the proportion, but I don't know how to do so.

CodePudding user response：

Maybe something like this?

P.S. I don't think CSS have something to let you horzionally align several child elements from different blocks.

.row2 {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
}


.til-col {
  display:flex;
  flex-basis: 32%;
  border: 7px solid #c9c9c9;
  border-radius: 30px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  padding: 40px;
  box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
  flex-direction: column;
  align-items: center;
}

.til-col img {
  width: 50%;
  border-radius: 10px;
  padding-bottom: 5%;
}
.til-col > p{
padding-bottom:40px;

}
.button {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin: 12px 34px;
  border-radius: 10px;
  font-size: 13px;
  padding: 0 20px;
  background: #012a5d;
   position: absolute;
   bottom:20px;

  cursor: pointer;
}

<div >
  <div >
    <img src="images/Home/Layer 2-2.svg">
    <p>Interact with a TIL timeline showing key moments and events over the years</p>
    <a href="classroom.html" >
      <h3>TIL Story</h3>
    </a>
  </div>
  <div >
    <img src="images/Home/Progress.svg">
    <p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
    <a href="classroom.html" >
      <h3>Projects</h3>
    </a>
  </div>
  <div >
    <img src="images/Home/Report_icons-02 1.svg">
    <p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
    <a href="classroom.html" >
      <h3>Classroom Redesign</h3>
    </a>
  </div>
</div>

CodePudding user response：

You can follow below code for solution

.row2 {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
}

.til-col {
  flex-basis: 32%;
  border: 7px solid #c9c9c9;
  border-radius: 30px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  padding: 40px;
  box-shadow: 5px 5px 20px rgba(92, 91, 91, 0.2);
  flex-direction: column;
  align-items: center;

    display: flex;
    justify-content: space-between;
    text-align: center;

}

.til-col img {
  width: 50%;
  border-radius: 10px;
}

.icon{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin-bottom: 30px;
}

.button {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin: 34px 0 0 0;
  border-radius: 10px;
  font-size: 13px;
  padding: 0 20px;
  background: #012a5d;
  position: relative;
  cursor: pointer;
}

<div >
  <div >
    <div >
        <div ><img src="https://dynamic.brandcrowd.com/asset/logo/2a056b05-ac9b-404f-a619-eba59f92ef48/logo-search-grid-1x?v=637631474641000000"></div>
        <p>Interact with a TIL timeline showing key moments and events over the years</p>
    </div>
    <a href="classroom.html" >
      <h3>TIL Story</h3>
    </a>
  </div>
  <div >
    <div >
        <div ><img src="https://cdn-icons-png.flaticon.com/512/109/109733.png"></div>
        <p>Discover projects and initiatives that have launched out of TIL to support innovation in learning spaces</p>
    </div>
    <a href="classroom.html" >
      <h3>Projects</h3>
    </a>
  </div>
  <div >
    <div >
        <div ><img src="https://miro.medium.com/max/1268/0*2pi-PJAAVse41Ovk.png"></div>
        <p>See the transformation of classroom spaces and follow progress over stages of the redesign process</p>
    </div>
    <a href="classroom.html" >
      <h3>Classroom Redesign</h3>
    </a>
  </div>
</div>

CodePudding user response：

Simply adding the below styles to ".til-col" class will achieve the expected result

display: flex;
text-align: center;