* {
  margin: 0;
  padding: 0;
}
.parent {
  display: table;
  border: 1px solid #fff;
  box-sizing: border-box;
  margin: auto;
}
.a {
  border-bottom: 1px solid #fff;
}
.a,
.b {
  display: block;
  width: 900px;
}
.clear,
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.a div:last-child,
.b div:last-child {
  border-right: 0;
}
.parent1,
.parent2,
.parent3,
.parent4,
.parent5,
.parent6 {
  /*display:inline-block;*/
  float: left;
  width: 150px;
  height: 35px;
  background: #ccc;
  text-align: center;
  line-height: 35px;
  border-right: 1px solid #fff;
  box-sizing: border-box;
}
.parent7,
.parent8,
.parent9,
.parent10,
.parent11,
.parent12 {
  /* display:inline-block;*/
  width: 150px;
  float: left;
  height: 45px;
  background: #dddccc;
  text-align: center;
  line-height: 45px;
  border-right: 1px solid #fff;
  box-sizing: border-box;
}
/* Скрываем и показываем настроки в таске */
.hide {
    display: none; 
}
.hide + label ~ div{
    display: none;
}
/* оформляем текст label */
.hide + label {
    border-bottom: 1px dotted red;
    padding: 0;
    color: red;
    cursor: pointer;
    display: inline-block; 
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px; 
}