выравнивание текста до абсолютно позиционированного div

Question

Часть сложного дизайна формы ... Я хочу разместить два элемента таким образом, чтобы второй был абсолютно позиционирован (данные), а первый был опущен до левой стороны второй. Я предполагаю, что это нужно будет третий (ограждающих) DIV, что-то вроде:

<divMain> 
<div3><div1>name</div1><div2>data</div2></div3> 
</divMain> 

различных размеров/кернинга имени и полей данных из-за шрифтов и т.д. сделать точный расчет невозможно.

Есть ли способ сделать это в CSS ~ ~ без JQuery, JavaScript и т.д.

Answer 1

Что-то вроде этого?

.main{ 
 
    position:relative; 
 
    width:300px; 
 
    height:200px; 
 
    background:yellow; 
 
} 
 
.div3{ 
 
    background: red; 
 
    position : absolute; 
 
    top:50%; 
 
    width:100px; 
 
    transform:translate(-50%,-50%); 
 
    left:50%; 
 
    display:flex; 
 
} 
 

 
.div2{ 
 
    background:white; 
 
    flex:1; 
 
    } 
 

 
.div1{ 
 
    background:grey; 
 
    flex: 0 0 40px; 
 
    }

<div class="main"> 
 
<div class="div3"><div class="div1">name</div><div class="div2">A lot of data</div></div> 
 
</div>