I've been struggling to find a solution for an issue with my HTML. I have three 'divs' that need to display different information in their own line, enclosed in a parent element with a centered border. Despite trying solutions like inline-block and float, I can't seem to get the width of the parent to adjust correctly while keeping the content centered both vertically and horizontally.
Here is the HTML code snippet:
<div class="service-options">
<div class="from-group">
<h1 class="animal-title">testing inline-block</h1>
<div class="list-services">
<div class='column-service'>
<div class="service-name">
online
</div>
<div class="service-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="service-price">
100<span class="pricecurrency">€</span>
</div>
</div>
<div class='column-service'>
<div class="service-name">
store
</div>
<div class="service-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="service-price">
200<span class="pricecurrency">€</span>
</div>
</div>
<div class='column-service'>
<div class="service-name">
postal service
</div>
<div class="service-description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="service-price">
150<span class="pricecurrency">€</span>
</div>
</div>
</div>
</div>
And here is the corresponding CSS:
.animal-title {
padding: 45px 0 45px 60px;
color: #666B74;
font-family: 'RalewayRegular';
font-weight: bold;
font-size: 36px;
}
.column-service {
border: 3px solid #D53865;
}
.list-services {
display: flex;
justify-content: space-around;
padding: 45px 0 0 60px;
}
.service-name {
clear: both;
float: left;
font-size: 20px;
color: #D53865;
font-weight: bold;
font-family: 'RalewayRegular';
}
.service-description {
clear: both;
float: left;
font-size: 16px;
color: #666b74;
font-family: 'RalewayRegular';
width: 50%;
}
.service-price {
clear: both;
float: left;
font-size: 22px;
color: #D53865;
font-weight: bold;
}
.price-currency {
font-weight: normal;
}
If you want to see the current behavior in action, check out the Codepen link below:
https://codepen.io/CharlieJS/pen/GRZqbGB
I'd appreciate any help or guidance you can offer. Thank you for your time and assistance.