Hide text overflow of one column if second column text longer

Ionic Framework Ionic React
1

Hi,

I am trying to make two columns such as below:

Column 1 Column 2
Lorem ipsum dolor sit amet consectetur adipiscing elit

However, I want to make sure that if the text in Column 2 gets really long, the text in Column 1 will be wrapped with ellipsis and Column 2’s text will be shown in full as follows:

Column 1 Column 2
Lorem ips… Vestibulum pharetra lectus ac velit dictum

I tried to create it with the below markup:

<IonRow nowrap='true'>
	<IonCol>
		<div className='hide-overflow'>Column 1 Text</div>
	</IonCol>
	<IonCol size='auto'>
		<div><strong>Column 2 Text</div>
	</IonCol>
</IonRow>

.hide-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

But it seems to not work and Column 1 is taking up all the space without overflowing. From the docs, it said that size='auto' would mean the size would expand to accommodate the width of the element and other columns will re-size automatically.

Can anyone help me point in the right direction?