.heading-line { display: flex; align-items: flex-start; gap: 0.5rem; } .hit-dice-container { display: flex; flex-direction: row; gap: 3rem; .input-container { display: flex; flex-direction: row; flex-wrap: wrap; width: 20rem; row-gap: 0.5rem; column-gap: 3rem; // input { // flex: 0 0 4rem; // } } } input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; background: white; border: 1px solid #000; position: relative; } input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background: #815139; transform: translate(-50%, -50%); }