@import url("https://fonts.googleapis.com/css?family=Poppins:200,200i,300");
*, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

div.c{
  position: relative;
  /* margin:2em; */
}
input{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  visibility: 0;
}

label::before{
  content:"";
  display: inline-block;
  border: 12px solid transparent;
  border-left:12px solid white;
}
label{
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: left;
}
div.p{
  max-height:0px;
  overflow: hidden;
  transition:max-height 0.5s;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
}
div.p p {
  padding:0.5em;
}
input:checked ~ h6 label::before{
  border-left:15px solid transparent;
  border-top:10px solid white;
  margin-top:12px;
  margin-right:10px;
}
input:checked ~ h6 ~ div.p{
  max-height:150px;
}