Как принести квадратную форму с помощью div и выровнять текст вправо с помощью css

Question

Как принести квадратную форму с помощью div и выровнять текст справа, используя css?

я хочу показать, как диаграмма легенда squareshapeimage (Использование дел) Легенда Текст

Я попытался ниже пути, но шрифт в ближайшие ниже

<div> <div vertical-align: middle; margin-bottom: 0.75em; style="width:5%; height:5%; margin-top:4%; margin-left:3%; padding-bottom:5%;background-color:red"> </div> <span>Present</span> </div> 

Answer 1

вы ищете что-то вроде этого?

.a { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid rgb(0, 0, 0); 
 
} 
 
.a span { 
 
    position: absolute; 
 
    right: 10px; 
 
    top: -10px; 
 
    display: block; 
 
    background-color: #FFF; 
 
    padding: 0 5px; 
 
}

<div class="a"> 
 
    <span>Present:</span> 
 
</div>