Rewrite some javascript code in a vue page to display a list item

I have this code

<div class="card-body">
<li v-for="(item, index) in selectedMemberships" :key="index">
{{ item.ITEM }} {{ item.DATA }}
</li>
</div>

Item .ITEM can be a date range like 2021- 2023 or it could be one date like 2021 -

item.DATA is text and can failrly long-- such as

"During my time in college at the State University of New York (SUNY) at Albany, Andrew Aplin, PhD at Albany Medical College as a research etc."

I need something inserted so the output looks clean such as:


2022- "During my time in college at the State University of New York (SUNY) at Albany, Andrew
Aplin, PhD at Albany Medical College as a research etc ....

and

2022 - 2023 "During my time in college at the State University of New York (SUNY) at Albany,
Andrew Aplin, PhD at Albany Medical College as a research etc ......

The text auto wraps. I would like it so I can set the widths of each column


The visual is not showing correctly here so please look at the attached image