Javascript 两个并排输入

我目前正在练习一些WebDev，我正在研究一个交互式食物金字塔。我已经能够对齐其他输入，但三角形顶部的输入给我带来了麻烦，我尝试了从浮动到flex和内联块的所有方法。似乎什么都不管用，任何帮助都将不胜感激

函数递增值1（）{
让value=parseInt（document.getElementById（'number1'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number1'）。value=value；
}
函数递减值1（）{
让value=parseInt（document.getElementById（'number1'）。value，10）；
值=isNaN（值）？0：值；
如果（值>0）{
价值--；
}
document.getElementById（'number1'）。value=value；
}
函数增量值2（）{
让value=parseInt（document.getElementById（'number2'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number2'）。value=value；
}
函数递减值2（）{
让value=parseInt（document.getElementById（'number2'）。value，10）；
值=isNaN（值）？0：值；
如果（值>0）{
价值--；
}
document.getElementById（'number2'）。value=value；
}
函数增量值3（）{
让value=parseInt（document.getElementById（'number3'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number3'）。value=value；
}
函数递减值3（）{
让value=parseInt（document.getElementById（'number3'）。value，10）；
值=isNaN（值）？0：值；
如果（值>0）{
价值--；
}
document.getElementById（'number3'）。value=value；
}
函数增量值4（）{
让value=parseInt（document.getElementById（'number4'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number4'）。value=value；
}
函数递减值4（）{
让value=parseInt（document.getElementById（'number4'）。value，10）；
值=isNaN（值）？0：值；
如果（值>0）{
价值--；
}
document.getElementById（'number4'）。value=value；
}
函数增量值5（）{
让value=parseInt（document.getElementById（'number5'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number5'）。value=value；
}
函数递减值5（）{
让value=parseInt（document.getElementById（'number5'）。value，10）；
值=isNaN（值）？0：值；
如果（值>0）{
价值--；
}
document.getElementById（'number5'）。value=value；
}
函数增量值6（）{
让value=parseInt（document.getElementById（'number6'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'number6'）。value=value；
}
函数递减值6（）{
让value=parseInt（document.getElementById（'number6'）。value，10）；
值=isNaN（值）？0：值；
如果（值>0）{
价值--；
}
document.getElementById（'number6'）。value=value；
}
var颜色=[“红色”、“蓝色”、“绿色”、“黄色”、“紫色”、“金色”、“粉色”、“灰色”、“绿松石色”、“浅绿色”]；
var i=0；
选择颜色；
函数changeColour（）{
selectedColor=颜色[i]；
document.getElementById（“数字”+1）.style.backgroundColor=selectedColor；
i++；
如果（i>颜色.长度）
i=0；
}
函数printDate（）{
让value=document.getElementById（“日期”）.value；
document.getElementById（“check”）.innerHTML=“日期：”+值；
}

.container{
文本对齐：居中；
位置：相对位置；
最高：40%；
}
.内部文本1{
显示：无；
位置：绝对位置；
顶部：20px；
左：248px；
文本对齐：居中；
底部：-65px；
}
.内文{
显示：无；
位置：相对位置；
文本对齐：居中；
底部：-25px；
}
.内部文本6{
显示：无；
位置：相对位置；
文本对齐：居中；
底部：-120px；
/*浮动：左*/
}
#p6{
边框底部：200px纯蓝色；
左边框：100px实心透明；
右边框：100px实心透明；
身高：0；
宽度：0；
右边距：自动；
左边距：自动；
}
#p5-5{
边框底部：20px纯白；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：10px；
右边距：自动；
左边距：自动；
}
#p5{
边框底部：80px纯黑；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：220px；
右边距：自动；
左边距：自动；
}
#p4-5{
边框底部：20px纯白；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：240px；
右边距：自动；
左边距：自动；
}
#p4{
边框底部：80px纯紫色；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：330px；
右边距：自动；
左边距：自动；
}
#p3{
边框底部：80px纯绿；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：420px；
右边距：自动；
左边距：自动；
}
#p2{
边框底部：80px实心黄色；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：510px；
右边距：自动；
左边距：自动；
}
#p1{
位置：相对位置；
最高：40%；
边框底部：80px实心红色；
左边框：45px实心透明；
右边框：45px实心透明；
身高：0；
宽度：600px；
右边距：自动；
左边距：自动；
}
#p1：悬停。内部文本1{
显示：块；
}
#p2：悬停。内部文本{
显示：块；
}
#p3：悬停。内部文本{
显示：块；
}
#p4：悬停。内部文本{
显示：块；
}
#p5：悬停。内部文本{
显示：块；
}
#p6：悬停。内部文本6{
显示：块；
}
.按钮{
右边距：自动；
左边距：自动；
位置：相对位置；
}
#b1{
显示：内联块；
高度：25px；
宽度：30px；
边界半径：50%；
边框：纯红；
文本对齐：居中；
}
#第一{
显示：内联块；
高度：25px；
宽度：25px；
边界半径：50%；
边框：纯红；
背景颜色：灰色；
文本对齐：百分位
#p6:hover .inside-text6{
    display: block;
} 

#p6:hover .inside-text6 {
    display:flex;
  justify-content:center;/* it will center content which might overflow on both sides too */
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
}

#p6:hover .inside-text6 {
  display: flex;
}

function incrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(el).value = value;
}

function decrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    if(value>0)
    {
        value--;
    }
    document.getElementById(el).value = value;
}

<input type="button" onclick="decrementValue('number1')" value="-" id="b1" />
<input type="button" onclick="decrementValue('number2')" value="-" id="b2" />
<input type="button" onclick="decrementValue('number3')" value="-" id="b3" />
...