CSS / HTML：将两个文本对齐到不同边的行，并用点填充间隙

Question

我需要创建一个类似于附加屏幕截图的布局。

首先，我尝试使用表格创建此布局，但我无法用点填充两个文本之间的空白。然后，我尝试使用flexbox使用ul元素创建它。

守则：

＆＃13;

＆＃13;

ul {
  list-style: none;
  width: 250px;
  height: 100px;
  background: white;
}

ul li {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-around;
}

ul li:after {
  content: ' ';
  width: 100%;
  height: 0px;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 1px dashed red;
}

ul li span {
  background: #fff;
  position: relative;
  top: 6px;
  z-index: 3;
}

ul li .prop-name {
  flex-basis: auto;
  order: 1;
}

ul li .prop-val {
  order: 2;
}

＆＃13;

<div class="users-props">
  <ul class="users-props-list">

    <li>
      <span class="prop-name">email</span>
      <span class="prop-val">denimgoldtv@gmail.com</span>
    </li>

    <li>
      <span class="prop-name">name</span>
      <span class="prop-val">heyyyy</span>
    </li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

这是the result。问题是正确的部分应该与左边对齐，而且我也找不到正确的方法，文字大小也可能不同。有谁知道我该如何解决？