用于Wordpress的CSS手风琴

Question

业余编码员在这里。我正在尝试为wordpress制作一部响应式手风琴。我设法到目前为止，但我不知道如何使手风琴的高度自动适应内容。

  

https://jsfiddle.net/jahangeerm/hbbxgutx/8/

    .accordion_mj {
    width: auto;

}
.accordion_mj label {
    padding: 20px 20px;
    position: relative;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #fff;
    line-height: 40px;
    font-size: 19px;
    background: #fff;

}
.accordion_mj label:hover {
    background: #fff;
}
.accordion_mj input + label {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion_mj input:checked + label,
.accordion_mj input:checked + label:hover {
    background: #fff;
    color: #fff;

}
.accordion_mj input {
    display: none;
}
.accordion_mj .article {
    background: rgb(255, 255, 255);
    overflow: hidden;
    height: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion_mj .article p {
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 0px;
}
.accordion_mj input:checked ~ .article {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.accordion_mj input:checked ~ .article.ac-small {
    height: 155px;
}
.accordion_mj input:checked ~ .article.ac-medium {
    height: 400px;
}
.accordion_mj input:checked ~ .article.ac-large {
    height: 600px;
}

请帮我调整一下，使其符合我的内容。谢谢。