Why does display: flex break the phrase into lines? - html

Question

I have such a text:
<div className="rate" >
<mark className="rate-mark"> Currency Rate : </mark>
<mark className="code-mark">1 {code} = </mark>
<mark className="val-mark" style={{color}}>{rate}</mark>
<mark className="base-mark"> {base} </mark>
css
.rate-mark{
font-size: 28px;
font-weight: 500;
position: relative;
left: 30%;
top: 70%;
text-align: center;
background-color: #fff;
width: 250px;
height: 50px;
}
.val-mark{
background: none;
font-family: Economica, serif;
position:relative;
top: 10%;
left: -12%;
font-size: 25px;
}
.code-mark{
background: none;
font-family: Economica, serif;
position:relative;
padding-top: 20px;
margin: 0px 0px 0px 50px;
font-size: 25px;
width: 100px;
top: 80%;
}
.base-mark{
background: none;
font-family: Economica, serif;
position:relative;
padding-top: 20px;
margin: 0px 0px 0px 500px;
font-size: 25px;
width: 100px;
top: 80%;
}
I wanted to make such a text:
1 'code' = 0.12 'base'
But I couldn't shift base and code relative to value.I.e. top,left... didn't work.I saw in a similar situation that it is necessary to set for the parent div .rate{ display: flex; }
But after I did it the phrase Currency Rate : divided into new lines:
I tried to change everything so that it was on the same line, but nothing works.I've worked with css very little, so I'll be glad for help to fix it.

Answer 1

It is not clear at all what your overall objective is, but if all you want is the phrase on one line then, given that there is sufficient width on your device/view to do so, then the following is all you need:
.ratePhrase {
font-family: Economica, serif;
}
span.rate{
font-size: 28px;
background: #fff;
}
span.val {
background: none;
font-size: 25px;
}
span.code {
background: none;
font-size: 25px;
}
span.base {
background: none;
font-size: 25px;
}
<div class="ratePhrase" >
<span class="rate"> Currency Rate : </span><br>
<span class="code">1 {code} = </span>
<span class="val" style={{color}}>{rate}</span>
<span class="base"> {base} </span>
</div>
If you do not want the phrase to wrap, even if your device/view is not wide enough, then add 'white-space: nowrap;' to the .ratePhrase CSS class.

Answer 2

flex are adjustable objects if there isn't enough space for the full sentence it will go to the next line.
You could solve this by wrapping the whole thing around a div like
<div>Currency Rate: </div>
If that doesn't work you could try increasing margin and padding in css