Extra border when "merging" two divs with round borders

Question

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 class="info">
      <h3 class="description-title">Descrição</h3>
      <p class="description-text">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>

Answer 1

like this try to make this changes Maybe it will work

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

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

.info .description-text {
max-height: 100px;
overflow-y: hidden;
text-align: justify;
font-size: 14px;
padding: 20px 12px;
margin: 0;
background-color: #ddd;
}