My goal is to create divs that are all the same size, while aligning some content within each div differently due to varying lengths.
The objective is to keep the icon and text in a consistent position within all divs, but allow the divs to expand at the bottom to achieve uniformity in size.
Below is the code I am working with:
.servicescontainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 30px;
padding: 20px;
box-shadow: 3px 3px 20px #333;
min-height: 240px;
}
.servicesicon {
width: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.servicestext {
width: 100%;
text-align: center;
position: relative;
padding-right: 10px;
}<div class="servicescontainer">
<div class="servicesicon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
<div class="servicestext">
<h4>
Repairs
</h4>
<ul>
<li>Custom Replacement Parts</li>
<li>Hydraulic Cylinder Repair & Refurbish</li>
<li>Heavy Equipment Repair & Modification</li>
</ul>
</div>
</div>
<div class="servicescontainer">
<div class="servicesicon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
<div class="servicestext">
<h4>
Welding & Fabrication
</h4>
<ul>
<li>Certified Steel, Aluminum & Stainless Welding</li>
<li>Structural Fabrication & Assembly</li>
<li>Metal Forming & Cutting</li>
<li>Onsite Portable Services</li>
</ul>
</div>
</div>Despite attempts using position: relative and position: absolute, I have not been successful. Using min-height distorts the alignment of the text and h4 titles do not line up properly as desired.
A visual representation of the before and after I am aiming for can be seen here.