Tag small sobrepondo à tag abaixo

Oi Valdenir, tudo bem? Legal essa sua pergunta ! O que acontece é o seguinte, por padrão a tag <small> possui a propriedade 'display: inline;' e por isso se comporta da maneira que está se comportando. Antes de explicar o porque que isso acontece, é legal a gente ver as algumas das propriedades do display. Entre as que são interessantes no momento temos:

display: block
display: inline-block
display: inline

Bom, a propriedade block faz com que o elemento ocupe uma linha inteira do html, ou seja, ele não divide espaço horizontal com outros elementos. Outra observação importante aqui é que é possível definir tamanho ( width e height ) de elementos que são display block.

A pripriedade inline-block faz com que ele possa dividir esse espaço horizontal com outros elementos inline-block e além disso mantém o tamanho ( width e height ) que o display block oferece.

A propriedade inline faz com que o elemento possa dividir espaço com outros elementos inline ou inline-block porém não deixa possível definir o tamanho do elemento.

O que acontece no seu caso é que como a tag <small> é por padrão inline e isso não foi modificado, não é possível definir tamanho nela, ou seja, ela fica do tamanho do texto. O padding que vc colocou nela por sua vez aumenta seu tamanho, mas o tamanho aumentado não é reconhecido e ele acaba não empurrando a tag de baixo, assim por sua vez sobrepondo ela!

Espero ter respondido a pergunta, qualquer coisa dá um toque (: Observação: Tenta trocar o display da tag para block ou inline-block (:

Abração!

Obrigado Yuri!

Grande abraço