Hi,
I'm designing a newsletter template with tags, and the tags are really given me hard times.

I have to do:
No limit of amount for the tags.
No charaters limit to each tag.
These tags are within a rectangle which is max width 600px.

I've try to use <table>, but <table> will break when viewing mobiles.

For example,

        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" style="padding: 18px">
                      <!-- tag -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="33%">
                                        <tr>
                                            <td>
                                                    Nam porttitor blandit accumsan. Ut vel dictum sem
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td align="center" style="padding: 18px">
                                    <!-- tag -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="33%">
                                        <tr>
                                            <td> 
                                                    Mauris turpis nisl, molestie
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td align="center" style="padding: 18px">
                                    <!-- tag -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="33%">
                                        <tr>
                                            <td> 
                                                    Praesent aliquet quam et libero dictum, vitae dignissim
                                            </td>
                                        </tr>
                            </table>
                    </td>
            </tr>
    </table>

There are 2 problems I've encountered,

  1. These<table> will broken when viewing mobiles, it can't be responsive. In fact, I don't know why.

    When I remove the <table> of tags, the mobiles will be normal.
    Once I put them back, the responsive broken.

  2. Since I can't limit the characters in tag, there is pain in the rows, like how many tags will be in one row?
    I know it's better to do newsletter using <table>
    But under the situation of tags, I still want to looking for is any other method out there.


And last, attached the mockup, this is the look I want to achieve.

the mockup

Any suggestion?
Thanks.