将文本与绝对定位的div对齐

Question

复杂表单设计的一部分......我想放置两个项目，使得第二个项目绝对定位（数据），第一个项目与第二个项目的左侧相对应。我猜这需要第三个（封闭的）div，例如：

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

由于字体等原因，不同的名称和数据字段的大小/字距调整使得无法进行准确的计算。

有没有办法在CSS中执行此操作〜没有~jquery，javascript等。

Answer 1

这样的东西？

＆＃13;

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;