如何修改自定义计算器的CSS样式以实现目标设计效果

我正在开发一款充气城堡价格计算器，想要调整当前界面的样式，为简化示例，以下CSS代码暂未包含颜色相关配置。

• 当前界面效果
• 期望实现的界面效果
• 充气城堡参考示意图

现有CSS代码 #

.button { text-align: center;}
label {margin: 10px ;}
label:first-of-type,
label:last-of-type {display: block;}

.img2 {
    width: 300px;
}

现有HTML代码 #

<form class="calculator">
    <label for="base_width">底座宽度（米）</label>
    <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width" onclick="checks()" />

    <label for="base_length">底座长度（米）</label>
    <input type="number" value="1" min="1" max="20" step="1" id="base_length" name="base_length" onclick="checks()" />

    <label for="wall">墙体类型</label>
    <select name="walltype" id="walltype">
        <option value="40">充气款</option>
        <option value="25">网状款</option>
    </select>
    
    <div class="button">
        <label for="wall_side1">第1侧 <input type="checkbox" id="wall_side1" /></label>
        <label for="wall_side2">第2侧 <input type="checkbox" id="wall_side2" /></label>
        <img class="img2" alt="充气城堡示意图">
        <label for="wall_side3">第3侧 <input type="checkbox" id="wall_side3" /></label>
        <label for="wall_side4">第4侧 <input type="checkbox" id="wall_side4" /></label>
    </div>

    <label for="ceiling">顶部盖板</label>
    <select name="ceiling" id="ceiling">
        <option value="1">是</option>
        <option value="0">否</option>
    </select>

    <label for="tunnels">隧道数量</label>
    <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel" />
    
    <label for="slides">滑梯数量</label>
    <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide" />

    <input type="button" value="计算" onclick="calculate()" />

    <span>总计：$</span>
    <span id="totalvalue"></span>
    <script type="text/javascript" src="calc.js"></script>
</form>

内容的提问来源于stack exchange，提问作者bobkelly