div width adjustment without text-wrapping on resizing browser window - html

Question

I have three div elements which have h1 contents. I want first div at left side, 2nd at center and the 3rd at right side, meaning all in the row. When I resize the window (responsiveness), the text should not break into two lines but it should only minimize or maximize the gap between each div. Currently, all three div are very close to each other. It is written in wordpress, but here is code snippet of that part:
<div style="display:inline-block;">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div style="display:inline-block;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>
<div style="display:inline-block;">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
It is implemented on the url: yaqoobyawar.com

Answer 1

Update your existing HTML
<div class="slot-c">
<div style="display:inline-block;">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div style="display:inline-block;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
</div>
<div style="display:inline-block;">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
</div>
with the this HTML which is using the Bootstrap 4 Grid.
<div class="row">
<div class="col">
<h1 style="color: white;">Yaqoob Yawar</h1>
</div>
<div class="col" style="text-align: center;">
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
</div>
<div class="col">
<h1 style="color: white;">یعقوب یاور</h1>
</div>
</div>
Also, remove the d-flex class from its parent div.

Answer 2

.grid-container {
display: grid;
grid-template-rows: 1fr;/* No. of row You want to create */
grid-template-columns: 1fr 1fr 1fr; /*No. of column you want to create */
}
<div class="grid-container">
<div>
<h1 >Yaqoob Yawar</h1>
</div>
<div>
<img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>
<div >
<h1 >یعقوب یاور</h1>
</div>
</div>