two texts overlapping each other when resizing window - html

Question

I have an HTML and CSS code below
.hero{
background: linear-gradient(0deg, #e8922d .11%, #eca757 127.33%);
overflow: auto;
position: fixed;
top: 0;
width: 100%;
height: 50px;
box-shadow: 3px 2px 3px #f1bd81;
}
.my-auto{
color: #FFFFFF80;
font-size: 14px;
font-weight: 600;
letter-spacing: .4px;
mix-blend-mode: normal;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
line-height: 50px;
}
.price_chart{
color: #FFFFFF80;
position: fixed;
right: 0;
margin-top: -38px;
margin-right: 10px;
}
<div id="header" class="hero">
<div class="dogeNav">
<span class="my-auto">
YOUR WALLET</span>
</div>
<div class="price_chart">
<p>current price - $0.05</p>
</div>
</div>
This is div header. "my-auto" class is in the center of div. "price-chart" is on the right side of div. Problem is when I resize my window two of the texts overlap each other, how could I fix that.

Answer 1

I didn't understood your question completely but I've made some changes on your code.
I hope this what you want.
.hero{
background: linear-gradient(0deg, #e8922d .11%, #eca757 127.33%);
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height: auto;
box-shadow: 3px 2px 3px #f1bd81;
}
.my-auto{
color: #FFFFFF80;
font-size: 14px;
font-weight: 600;
letter-spacing: .4px;
mix-blend-mode: normal;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
line-height: 50px;
padding-bottom: 10px;
}
.price_chart{
color: #FFFFFF;
position: fixed;
right: 0;
margin-top: -38px;
margin-right: 10px;
}
<div id="header" class="hero">
<div class="dogeNav">
<span class="my-auto">
YOUR WALLET</span>
<div class="price_chart">
<p>current price - $0.05</p>
</div>
</div>
</div>
Codepen.io