I am building a calculator and I would like it styled differently. The colours are not included in the css for simplicity.

[What it currently looks like](https://i.stack.imgur.com/3Tjrx.png)

[What I want it to look like](https://i.stack.imgur.com/C0UNh.png)

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

.img2 {
    width: 300px;
}
```

```html
</div>
            <form class="calculator">
                <label for="base_width">Base Width (m)</label>
                <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width" onclick="checks()"></input>

                <label for="base_length">Base Length (m)</label>
                <input type="number" value="1" min="1" max="20" step="1" id="base_length" name="base_length" onclick="checks()"></input>

                <label for="wall">Wall Type</label>
                    <select name="walltype" id="walltype">
                        <option value="40">Inflated</option>
                        <option value="25">Netted</option>
                    </select>

                <div class="button">
                        <label for="wall_side1">Side 1 <input type="checkbox" id="wall_side1" /></label>
                        <label for="wall_side2">Side 2 <input type="checkbox" id="wall_side2" /></label>
                        <img class="img2" src="https://i.stack.imgur.com/N1leH.png" alt="Bouncy Castle">
                        <label for="wall_side3">Side 3 <input type="checkbox" id="wall_side3" /></label>
                        <label for="wall_side4">Side 4 <input type="checkbox" id="wall_side4" /></label>

                </div>
                <label for="ceiling">Ceiling</label>
                    <select name="ceiling" id="ceiling">
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>

                <label for="tunnels">Tunnels</label>
                <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel"></input>

                <label for="slides">Slides</label>
                <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide"></input>

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

                <span>Total: $</span>
                <span id="totalvalue"></span>
                <script type="text/javascript" src="calc.js"></script>

                </form>
```

[enter image description here](https://i.stack.imgur.com/N1leH.png)