Jquery 动态高度与动画和所有元素垂直对齐中间

我有使用全局类的单选按钮。我希望尽可能少的代码能够重用元素。。。显示单选按钮有几种方式。一个标签包含单击时显示的信息，另一个标签包含大量文本

如果有很多文本，我有一个问题，它合并到单选按钮

有人知道我如何在这两种情况下使用代码吗？ 元素应始终垂直对齐中间

此处的示例和错误：

var checkbox=$（'.js inputround'）；
（函数（$）{
$（文档）.ready（函数（）{
复选框。每个（函数（）{
if（$（this.prop（'checked'））{
$（this）.parent（'.input-round__选项'）.addClass（'js-check-svg'）；
$（this.parent（'.js show info'）.addClass（'js-show'）；
}
});
//显示小信息，切换活动图标
checkbox.change（函数（）{
如果（复选框长度）{
如果（复选框为（“：选中”））{
roundInputShowElements（$（this））；
}否则{
RoundInAuthideElements（$（this））；
}
}
});
});
$（窗口）.on（'pageshow'，function（））{
复选框。每个（函数（）{
if（$（this.prop（'checked'））{
$（this）.parent（'.input-round__选项'）.addClass（'js-check-svg'）；
$（this.parent（'.js show info'）.addClass（'js-show'）；
}
});
});
})（jQuery）；
函数roundInputShowElements（元素）{
element.parent（'.js show info'）.addClass（'js-show'）；
element.parent（'.input-round__选项'）.addClass（'js-check-svg'）；
}
函数roundinputideelements（元素）{
element.parent（'.js show info'）.removeClass（“js show”）；
element.parent（'.input-round__选项'）.removeClass（'js-check-svg'）；
}

.input-round\u容器{
最小高度：55px；
}
.input-round___选项{
显示：块；
垂直对齐：中间对齐；
位置：相对位置；
身高：100%；
}
.input-round___输入{
-webkit外观：无；
-moz外观：无；
外观：无；
光标：指针；
显示：内联块；
大纲：无；
垂直对齐：中间对齐；
保证金：0；
}
.图标{
填充：当前颜色；
宽度：25px；
高度：25px；
显示：内联块；
垂直对齐：中间对齐；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.输入圆形图标{
位置：绝对位置；
左：0；
最高：50%；
转化：translateY（-50%）；
保证金：0；
颜色：#CB4C40；
}
.js检查svg.input-round__图标--激活{
不透明度：1；
过渡：所有0.1秒；
}
.图标{
填充：当前颜色；
宽度：25px；
高度：25px；
显示：内联块；
垂直对齐：中间对齐；
用户选择：无；
}
.input-round__图标--激活{
不透明度：0；
过渡：所有0.1秒；
}
.input-round__选项输入{
不透明度：0；
保证金：0；
}
.输入四舍五入文本{
显示：内联块；
最高：50%；
位置：相对位置；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
左侧填充：10px；
}
.js检查svg.input-round\u标签{
字号：500；
字体大小：16px；
线高：20px；
颜色：#46474a；
过渡：所有0.1秒；
}
.input-round\u option.js-show.input-round\u info{
显示：块；
不透明度：1；
高度：18px；
}
.输入四舍五入信息{
身高：0；
不透明度：0；
-webkit转换：所有0.3；
过渡：均为0.3秒；
显示：块；
字体大小：400；
颜色：#848e8e；
字体大小：14px；
线高：18px；
}

选项
复选框是
标签
小信息
选项
复选框是
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam和justo duo dolores和ea Reum

只需添加宽度：计算（100%-40px）

var checkbox=$（'.js inputround'）；
（函数（$）{
$（文档）.ready（函数（）{
复选框。每个（函数（）{
if（$（this.prop（'checked'））{
$（this）.parent（'.input-round__选项'）.addClass（'js-check-svg'）；
$（this.parent（'.js show info'）.addClass（'js-show'）；
}
});
//显示小信息，切换活动图标
checkbox.change（函数（）{
如果（复选框长度）{
如果（复选框为（“：选中”））{
roundInputShowElements（$（this））；
}否则{
RoundInAuthideElements（$（this））；
}
}
});
});
$（窗口）.on（'pageshow'，function（））{
复选框。每个（函数（）{
if（$（this.prop（'checked'））{
$（this）.parent（'.input-round__选项'）.addClass（'js-check-svg'）；
$（this.parent（'.js show info'）.addClass（'js-show'）；
}
});
});
})（jQuery）；
函数roundInputShowElements（元素）{
element.parent（'.js show info'）.addClass（'js-show'）；
element.parent（'.input-round__选项'）.addClass（'js-check-svg'）；
}
函数roundinputideelements（元素）{
element.parent（'.js show info'）.removeClass（“js show”）；
element.parent（'.input-round__选项'）.removeClass（'js-check-svg'）；
}

.input-round\u容器{
高度：55px；
}
.input-round___选项{
显示：块；
垂直对齐：中间对齐；
位置：相对位置；
身高：100%；
}
.input-round___输入{
-webkit外观：无；
-moz外观：无；
外观：无；
光标：指针；
显示：内联块；
大纲：无；
垂直对齐：中间对齐；
保证金：0；
}
.图标{
填充：当前颜色；
宽度：25px；
高度：25px；
显示：内联块；
垂直对齐：中间对齐；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.输入圆形图标{
位置：绝对位置；
左：0；
最高：50%；
转化：translateY（-50%）；
保证金：0；
颜色：#CB4C40；
}
.js检查svg.input-round__图标--激活{
不透明度：1；
过渡：所有0.1秒；
}
.图标{
填写：
.input-round__text {
      display: inline-block;
      top: 50%;
      position: relative;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      padding-left: 10px;
width: calc(100% - 40px);
    }