两栏布局：一般是左边一栏宽度固定，右边一栏宽度自适应。
本文要实现的布局效果是，表单提交时，左边label定宽，右边表单元素或文字宽度自适应。
若要实现左边是头像，右边是留言信息的布局，可自行尝试。
浏览器效果：
html代码片段：
<!--html-->
<div class="box">
<div class="left">姓名</div>
<div class="right">三三两两</div>
</div>
<div class="box">
<div class="left">年龄</div>
<div class="right">永远18</div>
</div>方式一：浮动float
/*css*/
.box {
margin-bottom: 10px;
}
.box:before,
.box:after {
content: '';
display: table;
}
.box:after {
clear: both;
}
.left {
float: left;
width: 100px;
padding-right: 12px;
box-sizing: border-box;
text-align: right;
font-weight: 600;
}
.right {
margin-left: 100px;
}浮动方式无非是：
左边的元素：左浮动+定宽。
右边的元素：margin-left: 定宽。
再加一些细节，
- 比如给box清浮动（常规操作）
- 左边元素加padding-right的同时，设置box-sizing: border-box
方式二：定位position
/*css*/
.box {
position: relative;
margin-bottom: 10px;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 100px;
padding-right: 12px;
box-sizing: border-box;
text-align: right;
font-weight: 600;
}
.right {
margin-left: 100px;
}定位方式无非是：
壳子box：是已定位元素，即position: static | relative | absolute | fixed | sticky都可。
最简便的就是设置position：relative;
左边的元素：绝对定位absolute， 定宽。
右边的元素：margin-left: 定宽。
方式三：flex
/*css*/
.box {
display: flex;
margin-bottom: 10px;
}
.left {
width: 100px;
/*flex: 0 0 100px;*/
padding-right: 12px;
box-sizing: border-box;
text-align: right;
font-weight: 600;
}
.right {
flex: 1;
}flex方式无非是：
壳子box：display: flex;
左边的元素：定宽，两种方式：1) width: 100px; 2）flex: 0 0 100px;。
注意点：
- 不建议同时使用width 和 flex-basis。因同时使用，width会失效。
- 使用flex-basis时，谨慎使用max-width和min-width。
因max-width和min-width会严格限制flex-basis，具体如下图。 
右边的元素：flex: 1;
Web端如果要兼容IE浏览器，谨慎使用。
方式四：grid
/*css*/
.box {
display: grid;
grid-template-columns: 100px auto;
margin-bottom: 10px;
}
.left {
padding-right: 12px;
box-sizing: border-box;
text-align: right;
font-weight: 600;
}
.right {
}grid方式无非是：
壳子box：display: grid; grid-template-columns: 定宽 auto;
不能更简单的写法，使用时要考虑浏览器的兼容性。
The End