<div class="wrapper">
  <div class="options">
    <pre>
.element {
  opacity:&nbsp;<select class="color">
        <option value="0">0</option>
        <option value="0.25">0.25</option>
        <option value="0.5" selected>0.5</option>
        <option value="0.75">0.75</option>
        <option value="1">1</option>
      </select>;
}
</pre>
  </div>

  <div class="content">
    <div class="element no1">1</div>
  </div>

</div>

html,
body { 
  height: 100%; 
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://assets.codepen.io/1189183/photoshop-tile.png);
}

.wrapper {
  display: flex;
  width: 100%;
  max-width: 720px;
  justify-content: space-evenly;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  font-size: clamp(12px, 3.5vw, 18px);
  padding: 0 20px;
}

.options { 
  flex: 0 0 auto;
  margin-bottom: 1em;
}

.content {
  position: relative;
}

.element {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(20px, 5vmin, 40px);
  background-color: var(--green);
  width: 30vmin;
  height: 30vmin;
  min-width: 15vmin;
  min-height: 15vmin;
  padding: 0;
  margin: 0;
  opacity: 0.5;
}

@media (min-width: 690px) {
  .wrapper { 
    flex-direction: row; 
    justify-content: space-between;
  }
  .options { margin-bottom: 0;}
  .element {
    min-width: 200px;
    min-height: 200px;
  }
}
View Compiled 
const color = document.querySelector('.color');
const element = document.querySelector('.element');

color.addEventListener('change', () => {
  element.style.opacity = `${color.value}`;
})
View Compiled

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.