<div class="container">
    <div class="accent-container1">
      <p><strong>accent-color1</strong></p>
      <div>
        <input type="radio" name="fruit" id="apple" checked><label for="apple">사과</label>
        <input type="radio" name="fruit" id="banana"><label for="banana">바나나</label>
        <input type="radio" name="fruit" id="orange"><label for="orange">오렌지</label>
      </div>
      <div>
        <input type="checkbox" name="fruit2" id="apple2" checked><label for="apple2">사과</label>
        <input type="checkbox" name="fruit2" id="banana2"><label for="banana2">바나나</label>
        <input type="checkbox" name="fruit2" id="orange2"><label for="orange2">오렌지</label>
      </div>
      <div>
        <label for="sugar">당도</label><input type="range" name="sugar" id="sugar">
      </div>
      <div>
        <progress id="progress-bar" aria-label="Content loading…"></progress>
      </div>
    </div>
    <div class="accent-container2">
      <p><strong>accent-color2</strong></p>
      <div>
        <input type="radio" name="fruit3" id="apple3" checked><label for="apple3">사과</label>
        <input type="radio" name="fruit3" id="banana3"><label for="banana3">바나나</label>
        <input type="radio" name="fruit3" id="orange3"><label for="orange3">오렌지</label>
      </div>
      <div>
        <input type="checkbox" name="fruit4" id="apple4" checked><label for="apple4" checked>사과</label>
        <input type="checkbox" name="fruit4" id="banana4"><label for="banana4">바나나</label>
        <input type="checkbox" name="frui4t" id="orange4"><label for="orange4">오렌지</label>
      </div>
      <div>
        <label for="sugar">당도</label><input type="range" name="sugar" id="sugar">
      </div>
      <div>
        <progress id="progress-bar" aria-label="Content loading…"></progress>
      </div>
    </div>
  </div>
div {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
}

.accent-container1 {
  border: 2px solid deeppink;
  padding: 20px;
}

.accent-container1 div {
  margin: 10px 0px;
}

.accent-container1 input, .accent-container1 progress {
  accent-color: deeppink;
}

.accent-container2 {
  border: 2px solid chartreuse;
  padding: 20px;
}

.accent-container2 div {
  margin: 10px 0px;
}

.accent-container2 input, .accent-container2 progress {
  accent-color: chartreuse;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.