.page-body { width: 100%; background-color: #fff; padding: 0px 10px 0px 10px; border-top: #dbdbdb solid 1px; border-bottom: #dbdbdb solid 1px; } .form-item { position: relative; width: calc(100% - 20px); display: flex; justify-content: space-between; /* justify-items: flex-end; */ /* flex: 1; */ -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-height: 2.5em; /* text-align: center; */ border-bottom: #ebebeb solid 1px; } .form-item::before { content: ""; position: absolute; width: 3px; height: 1em; margin-left: -7px; margin-top: 0.8em; background-color: #3d7eff; display: flex; justify-content: space-between; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border-bottom: #ebebeb solid 1px; } .last { border-bottom: none; } .required { align-self: center; margin-top: 2%; margin-right: 2px; color: red; } .unRequired { display: inline; white-space: nowarp; align-self: center; color: #acacac; /* width: 19.5px */ margin-right: 2.36px; } .label { /* -ms-word-wrap: ; */ /* white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; */ /* display: absolute; */ /* width: 100%; */ display: inline; white-space: nowrap; /* word-wrap: break-word; */ margin-right: 2px; align-self: center; } .form-item input { /* display: absolute; */ /* display: flex; */ /* flex-direction: column; */ /* min-width: none; */ width: 100%; /* float: right; margin-right: 0px; margin-left: auto; */ text-align: right; padding-top: 2px; font-size: 15px; align-self: center; } .unit { /* white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; */ /* width: 100%; */ color: #aaa; margin-left: 2px; display: inline; white-space: nowrap; text-align: right; align-self: center; }