Javascript 在占用所有可用空间的行上安装动态元素，而不在多行上打断组

我有一个动态表单，因为我的用户可以动态地向表单添加类别、组和个人输入

我需要能够打印完成的表格，并有它的布局，以看起来体面的打印页面

实际的表单可能非常复杂，因此为了尽可能简单，Iv'e制作了一个单独的页面用于打印，显示的内容非常少

这是我到目前为止所做的一些工作

我的问题区域在下面用红色和紫色标记

紫色：我希望将每行最后一个

输入值

字段扩展到右侧，以占用该行的所有剩余空间

红色：我想将

输入标签

和

输入值

设置为永远不会像这样在多行之间中断。如果行上没有足够的空间容纳这两行，则应将这两行移到下一行

html，正文{
字体系列：Arial、Helvetica、无衬线字体；
}
.打印容器{
宽度：210毫米；
/*高度：297mm*/
左边距：自动；
右边距：自动；
显示：表格；
高度：50px；
}
.vtop{
垂直对齐：顶部；
}
.打印页眉{
颜色：#9090！重要；
字体大小：26px！重要；
行高：26px！重要；
字体大小：粗体！重要；
填充底部：24px！重要；
边缘顶部：30px；
}
.打印标题文本{
转换：缩放（1.1,1.3）；/*W3C*/
-webkit转换：缩放（1.1,1.3）；/*Safari和Chrome*/
-moz变换：缩放（1.1,1.3）；/*Firefox*/
-ms变换：比例（1.1,1.3）；/*IE 9*/
-o变换：比例（1.1,1.3）；/*Opera*/
填充顶部：22px；
}
.打印类别标题{
文本对齐：居中！重要；
文本转换：大写！重要；
颜色：#606269！重要；
背景色：#F2F2！重要；
垫面：5px；
垫底：5px；
}
传奇{
背景色：#ffffff；
右侧填充：7px；
左侧填充：7px；
字体大小：16px；
文本转换：大写；
颜色：#606269！重要；
}
.打印类别标题{
边缘顶部：20px；
}
.左{
浮动：左；
}
.打印页眉{
宽度：100%；
高度：自动；
}
.打印标题>div{
}
上校3{
宽度：25%；
}
.col-6{
宽度：50%；
}
.col-9{
宽度：75%；
}
上校12{
宽度：100%；
}
.row:after、.clearfix:after、fieldset:after{
内容：“；
显示：块；
身高：0；
明确：两者皆有；
}
.row>div、.input标签、.input值{
浮动：左；
}
.输入值{
左边距：10px；
颜色：#999999；
最小宽度：118px；
边框底部：1px实心#999999；
高度：自动；
边缘顶部：10px；
显示：内联块；
右边距：15px；
}
.输入行{
空白：nowrap；
}
.输入标签{
高度：自动；
边缘顶部：10px；
}
.文本中心{
文本对齐：居中；
}
.类别{
宽度：100%；
}
字段集{
边框：1px实心#中交；
边缘顶部：10px；
}
@媒体打印和打印（彩色）{
* {
-webkit打印颜色调整：精确；
打印颜色调整：精确；
}
}

预先计划数据收集
第一类
Grup名称
输入标签
一些内容
输入标签
一些较长的内容
输入标签
小的
输入标签
有些甚至更长的内容
输入标签
输入标签
输入标签
输入标签
第二类
Grup名称
输入标签
输入标签
输入标签
输入标签
输入标签
输入标签
输入标签
输入标签
输入标签

我编写了一个函数，可以做两件事：

搜索输入值和输入标签不在同一行的位置，如果是，则将输入值移动到新的原始位置（清除：左）

移动到新raw后，id将上一个raw中的最后一个输入值进行扩展（行宽-远离左侧的输入）

JSFiddle：

守则：

$('.category').each(function(){
    $('.input-row').each(function(){
        this_input=$('.input-value',this).offset().top
        this_label=$('.input-label',this).offset().top
        console.log(this_input,this_label)
        if(this_input!=this_label){
            console.log('here')
            $('.input-label',this).css('clear','both')
            $('.input-value',$(this).prev()).width(
                $(this).width()-$('.input-value',$(this).prev()).offset().left
            )
        }

        if($(this).next().length==0){
            $('.input-value',this).width(
               $(this).width()-$('.input-value',this).offset().left
            )
        }
    })
})

---

以下是我根据@Armina的答案得出的一个片段，答案不错，但在不同大小的屏幕上表现不同

这是一个

$.fn.extend({
对齐行：函数（选项）{
var默认值={
container:“#print container”，//保存所有组的container元素的选择器