Top district text overflow

[balrajsingh9]

Describe the bug
The top district text in the state details overflows/overlaps with the next district text right below it when the text has more than 3 words. And it looks confusing and is attached to the next district text when the length of the text is 3.

To Reproduce

1. Click on Meghalaya (I'm sure valid for other states as well, but observed here) in the table.
2. Then click on See more details on ML.
3. Scroll down to Top Districts

Expected behavior
The text should be clearly visible with no overflow or overlaps and should have an appropriate margin between two district names.

Screenshots

1. When length > 3

2. When length == 3 (Edited in dev tools for an example)

Desktop:

• OS: macOS Catalina
• Browser: Chrome Canary
• Version: 86

Mobile:

• OS: Android 10
• Browser: Chrome
• Version: 83

Additional context
The problem seems to be the flex: 0 1 property on the h5 el. If we remove it, it renders just fine (see below screenshot).