how to make text not overlap it's container?

Question

i have this code:

<li style="padding: 23px 5px 23px 19px; width: 100%;">
  <div style="min-width: 50%;">
    Email Address
  </div>
  <div style="min-width: 50%;">
    Antonina.Russel47@gmail.com
  </div>
</li>

and the result looks like this: as you can see on the bottom cell, i would want the text that overlap to come on bottom. i tried flex-wrap: nowrap; with no success. Help?

Answer 1

Add this css

div{ white-space:normal; word-break: break-all}