.tabs {
  position: relative;
  clear: both;
  margin: 25px 0;
}
.tabs label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}

.tabs [type=radio] {
  display: none;
}

.content-rendering, .content-code {
  background: white;
  margin-top: 10px;
  margin-bottom: -10px;
  padding: 5px;
  border: 1px solid #ccc;
}

/* Does not require immediate sibbling */
.tab-rendering[type=radio]:checked ~ .label-rendering {
  background: white;
  border-bottom: 1px solid white;
}

.tab-code[type=radio]:checked ~ .label-code {
  background: white;
  border-bottom: 1px solid white;
}

.tab-metadata[type=radio]:checked ~ .label-metadata {
  background: white;
  border-bottom: 1px solid white;
}

.tab-rendering[type=radio]:not(:checked) ~ .content-rendering {
  display: none;
}

.tab-code[type=radio]:not(:checked) ~ .content-code {
  display: none;
}

.tab-metadata[type=radio]:not(:checked) ~ .content-metadata {
  display: none;
}

.content-rendering img {
  padding: 5px;
  border: 1px solid #ccc;
}