<div class="wrapper">
  <div class="options">
    <pre>
.element {
  border:&nbsp;<select class="width">
        <option value="0">0</option>
        <option value="5">5px</option>
        <option value="10" selected>10px</option>
        <option value="15">15px</option>
      </select> <select class="style">
        <option value="none">none</option>
        <option value="solid" selected>solid</option>
        <option value="dotted">dotted</option>
        <option value="dashed">dashed</option>
        <option value="double">double</option>
        <option value="groove">groove</option>
        <option value="ridge">ridge</option>
        <option value="inset">inset</option>
        <option value="outset">outset</option>
      </select> <select class="color">
        <option value="cyan">cyan</option>
        <option value="#00c774" selected>#00c774</option>
        <option value="rgb(8,6,124)">rgb(8,6,124)</option>
        <option value="hsl(359,100%,76%)">hsl(359,100%,76%)</option>
      </select>
}
</pre>
  </div>

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

</div>
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: 630px) {
  .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;
  }
}
View Compiled 
const width = document.querySelector('.width');
const style = document.querySelector('.style');
const color = document.querySelector('.color');
const element = document.querySelector('.element');

width.addEventListener('change', e => element.style.borderWidth = `${width.value}px`);
style.addEventListener('change', e => element.style.borderStyle = style.value);
color.addEventListener('change', e => element.style.borderColor = 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.