how to adjust the width of a div to its content when 'clear:both' and 'float:left' do not meet expectations?

Question

I know that there are more questions about the issue but all the solutions I find do not comply with the desired behavior and I do not know if I have something wrong with one of the parents. I have three 'divs' that contain three different pieces of information that have to be shown in their own line and the parent has to apply a border to it making everything centered both vertically and horizontally, creating a box with different texts. By applying solutions like inline-block or clear:both and float: left to each of the text blocks the width is adjusted to the content, but not to the parent. Trying to do the same on the parent does not apply.

here is my html

<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>
</div>

And here's my 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;
}

I leave a codepen link for you to see the current behaviour

https://codepen.io/CharlieJS/pen/GRZqbGB

I hope you can help me by getting me out of my mistake. I thank you in advance for your time and your help

Answer 1

You have set the width of .service-description to width: 50%. The 50% is referring to half of the width, thus not allowing the container to shrink accordingly.

If you want the width of the paragraph to be adjusted, you should set the width on the container, so the content is sized automatically or add margin to the column services.