.wrapper {
  width: 100%;
  height: 200px;
  border: 2px solid blue;
}

.right {
  height: 200px;
  width: 60%;
  background: red;
  float: right;
}

.left {
  width: auto;
  height: 200px;
  background: green;
}

<div class="wrapper">
  <div class="right">hello</div>
  <div class="left">dude</div>
</div>

你可以将两个元素如div水平对齐，右边的元素可以是动态的，左边的元素可以自动设置宽度。要自动获取宽度，可以使用width：auto;第一个div的属性。第二个div有一定的宽度，以百分比或像素为单位，所以第一个div可以使用float right属性来设置剩余的宽度。我创造了一个榜样。
如果你改变了右边元素的宽度，那么左边元素的宽度将自动使用剩余的宽度。
你也可以参考
Help with div - make div fit the remaining width

<div class="sec">
<div class="sec1">Doaa Mahmoud</div>
<div class="sec2">Ali</div>
</div>

.sec {
width: 80%;
height: 80px;
background-color: rgb(255, 255, 255);
display: flex;

}

.sec1 {
background-color: rgb(45, 170, 192);
padding: 15px;
width: 80%;
margin-right: 20px;

}

.sec2 {
background-color: rgb(45, 170, 192);
padding: 15px;
width: calc((20%-30px)/1);

}

试试这个。

.wrapper>div {
  border: 1px yellow solid;
  display: table-cell;
  height: 80px;
}

.one {
  width: 100%;
}

.two {
  width: auto;
}

<div class="wrapper">
  <div style="background:red;" class="one">hello</div>
  <div style="background:blue" class="two">dude</div>
</div>