I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below.
My goal is for the text within the card to move to a new line once its width reaches either 120px or 7.5em.
.card{
width: 269px;
margin-bottom: 3.5625rem;
display: flex;
flex-direction: column;
/* border: 1px solid rgba(177, 181, 190, 0.28); */
box-shadow: 0px 0px 0px 1px rgba(177, 181, 190, 0.315);
border-radius: .5625rem;
transition: .2s all var(--primary-ease);
}.card:hover{
box-shadow: 0px 7px 38px 0px #354f4d3b;
}.card:hover .card-title {
color: var(--primary-light);
}
.card-header{
background-color: #6484ED;
padding: 26px 70px;
border-radius: .5625rem .5625rem 0 0;
}
.card-info{
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
padding: 17px;
}
p.card-title{
position: static;
width: 50%;
}<div class="card">
<div class="card-header">
<svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="54.5" cy="54.5" r="54.5" fill="white"/>
</svg>
<p class="remove-defaults" style="font-family: Cairo;font-style: normal;font-weight: 600;font-size: 10px;line-height: 19px;color:#fff;">circle</p>
</div>
<div class="card-info">
<p class="card-title strong np">asctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdassdasctaasdassdassascasaaaasdassdass</p>
<div class="new"></div>
<p class="text-xs np">make school fun</p>
</div>
</div>