Automatically adjust text size in bootstrap 4 - html

Question

The numbers are going to the next line, how to adjust them to come in the same line without changing others size?
Run the below script in full screen:
.card-body {
display: flex;
}
.card-title {
margin-left: auto;
font-family: 'Yatra One', cursive;
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 10vw;
word-break: break-all;
}
}
.col-10 {
height: 65px;
}
.col-2 {
height: 65px;
}
.img-fluid {
height: 100%!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Yatra+One&display=swap" rel="stylesheet">
<div class="row">
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005243</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005243</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005218</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005218</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005218</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">1111111111</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
</div>
The numbers are going to the next line, how to adjust them to come in the same line without changing others size?
Also how to display numbers in the middle? (same space in top and bottom)

Answer 1

By default Boostrap wrote word-break: break-all; Changed to word-break: keep-all;
Read this
word-break w3 school
#media (min-width: 768px)
.card-title {
font-size: 3vw;
word-break: keep-all !important;
}

Answer 2

You can add margin: auto to center them and white-space: nowrap to prevent them from wrapping to the next line. Also, I'd suggest making font a bit smaller when resizing screen and/or making blocks bigger.
In case you want them to be absolutely centered and you don't care about overlapping the image, give them:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);