Currently facing an issue where my sentences break in the middle. Working with Material UI requires manual styling of different components like MUI. The problem I'm encountering can be seen below. I tried removing the display: flex, but then the square stops floating to the right, which is not what I want. How can I resolve the text breaking issue while keeping the square aligned to the right?
.box {
display: flex;
word-break: break-word;
align-items: center;
border: 4px dotted blue;
width: 25em;
}
.highlighted {
font-weight: bold;
}
.square{
width:10px;
height:10px;
background-color:red;
}<div class="box">
This sentence should contain a
<span class="highlighted"> highlighted</span>
piece of text.
<div class="square"></div>
</div>UPDATE: Here's the Desired Result
.container2{
border: 4px dotted blue;
width: 20em;
}
.square2{
width:10px;
height:10px;
background-color:red;
float: right;
}<div class='container2'>
This sentence should display a <b>styled </b>text. <div class='square2'></div>
</div>