I was trying to do something like the Instagram's "ask me a question" box, but when the two divs "merge", there's some extra border left around the title.

What I'm doing wrong?

.info {
    overflow: hidden;
    border-radius: 10px;
    background-color: white;
}

.info .description-title {
    color: #f1ecff;
    background-color: #333;
    font-size: 15px;
    padding: 12px;
    user-select: none;
}

.info .description-text {
    max-height: 100px;
    overflow-y: auto;
    text-align: justify;
    font-size: 14px;
    padding: 8px 12px;
}

<div >
      <h3 >Descrição</h3>
      <p >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis quo omnis, culpa modi explicabo eius delectus dolorem a inventore, adipisci aspernatur laudantium voluptatum corporis vitae enim qui? Eveniet cumque officiis molestiae tempora mollitia quia id minima earum facilis recusandae voluptatum voluptatibus optio similique dolore nobis, ab excepturi aliquam quasi animi quisquam porro velit quam veritatis? Natus modi aperiam adipisci maxime.</p>
</div>

CodePudding user response：

from you info class remove the background

CodePudding user response：

I read well the problem actually and delete the previous answer. Try to make this trick. Use a border in the info class and use the same color of the black area. Maybe you hide this little piece of white behind the black one.