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

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  padding: 25px;
}

.options { flex: 1 1 100%; }

.content {
  position: relative;
  flex: 1 1 auto;
}

.element {
  background-color: var(--blue);
  width: 100px;
  height: 100px;
  border: solid 10px var(--green);
  padding: 0;
}

@media (max-width: 400px) {
  .wrapper { 
    flex-wrap: wrap;
    padding: 0;
  }
  .options { padding: 10px 25px; }
  .content { height: 75px; }
  
  .element {
    width: calc(100% - 70px);
    height: 45px;
    margin: 0 auto;
  }
}

@media (min-width: 720px) {
  .wrapper { padding: 0; }
  .content {
    width: 250px;
    height: 230px;
  }

  .element {
    width: 200px;
    height: 200px;
  }
}

const select = document.querySelector('select');
const element = document.querySelector('.element');

select.addEventListener('change', e => {
  element.style.borderWidth = `${select.value}px`;
  console.log(select.value)
})