CSSで動的にdivを移動

Question

私はこの構造を持っていましたが、テキストが長いときにdivアイコンが動的に動くようにします

アイデアはありますか？

ありがとうございます。

.tit { 
 
    display: table; 
 
} 
 

 
.icon { 
 
    border-top: 5px solid currentcolor; 
 
border-right: 5px solid currentcolor; 
 
min-width: 42px; 
 
float: left; 
 
height: 22px; 
 
margin-top: -23px; 
 
margin-left: 25px; 
 
}

<div class="tit">Titleeeeeeeeeeeeeeeee</div> 
 
<div class="icon"></div>

Answer 1

ラッパーにdiv class="tit"を包みます。

.wrapper { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    border-top: 5px solid currentcolor; 
 
    border-right: 5px solid currentcolor; 
 
    min-width: 42px; 
 
    height: 22px; 
 
    margin-left: -40px; 
 
}

<div class="wrapper"> 
 
    <div class="tit">Titleeeeeeeeeeeeeeeee</div> 
 
    <div class="icon"></div> 
 
</div>

Answer 2

div class="icon"フレキシボックスとして

<div class="icon"> 
    <div class="tit">Titleeeeeeeeeee</div> 
</div> 

jsfiddle example