javascript - 在同一行上制作表单元素

我目前正在制作一个应用程序，并且尝试使3个表单元素对齐（25/25/50），无论谁看起来都不顺利。我将在末尾附加图片以显示当前的外观。另外，如果可能，我是否仍可以使3表单元素之间有一个空格，以便于阅读和解释？

Between
<div class="ui-grid-e">
  <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
  <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
  Comment
  <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
</div>

https://imgur.com/a/vlpbi/

最佳答案

只需更新您的标记

.ui-grid-e {
position: relative;
width: 400px;
}

.ui-block-a,
.ui-block-b,
.ui-block-c {
box-sizing: border-box;
padding: 0 5px;
}

.ui-block-a{
padding-left: 0;
}

.title-c {
padding-left: 5px;
}

.ui-block-title{
box-sizing: border-box;
float: left;
width: 50%;
}

.ui-block-a,
.ui-block-b {
float: left;
width: 25%;
}

.ui-block-c{
float: left;
width: 50%;
}

input {
width: 100%;
}

<div class="ui-grid-e">
                     <div class="ui-block-title title-a-b">Between</div>
                     <div class="ui-block-title title-c">Comment</div>
                        <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
                        <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>

                        <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
                    </div>