Ons-List-Item Auto Height Adjustment

Question

I attempted to use ons-list-item but the height is misaligned. I am looking for auto height adjustment solution but has spent too much time searching online with no avail. There could be a very simple solution to this, hope someone can help.

Attached image illustration of my issue. Image of Ons-List-Item with Height Issue

<ons-list>
        <ons-list-item class="list-item-container" modifier="tappable">
            <div id="myDiv" class="list-item-right">
                <div class="list-item-content">
                    <div class="bubble bubble desc">
                        Hi, how are you? Glad to hear you are interested in our project. Hi, how are you? Glad to hear you are interested in our project.
                        <br/><span class="lucent timeline-date">David, 3:14 PM</span>
                    </div>
                </div>
            </div>
        </ons-list-item>
        <ons-list-item class="list-item-container" modifier="tappable">
            <div class="list-item-right">
                <div class="list-item-content">
                    <div class="bubble bubble-alt green desc">
                        I look forward working with you.
                        <br/><span class="lucent timeline-date">Adrian, 3:16 PM</span>
                    </div>
                </div>
            </div>
        </ons-list-item>
    </ons-list>

Answer 1

set style="display:table" on ons-list-item