Show/hide some text in larger text

I’m trying to show/hide some text (a highlight) in the middle of a paragraph. These criteria are essential:

  1. I need the method to be flexible to work on a single line or multi-line.
  2. And I need it to not mess with the rest of the paragraph’s text line-height.

Below are what I have so far but neither is quite right. Version 1 has the transition I would prefer i.e. width of the <mark> tag reducing to zero and using an overflow: hidden to mask the text as it is reducing is size. The problem with this is it can’t be multi-line. Version 2 is a compromise that reduces font-size: 0px; but can be multi-line.

Is there any solution to getting this to work (looking like version 1 but functioning like version 2)? Or is there another solution to this? (I have also tried transform: scaleX(0); and this does not work).

body
{
    font-size: 15px;
    line-height: 21px;
    font-family: 'Open Sans';
}

.section
{
    position: relative;
    margin: 0px 0px 50px 0px;
    width: 500px;
    height: 210px;
    background: #eeeeee;
    border: 1px solid #666666;
}

.paragraph
{
    position: relative;
    width: 100%;
    height: 100%;
    display: inline;
    vertical-align: middle;
}

.paragraph1
{
    background: #00ffff;
}

.paragraph2
{
    background: #00ffff;
}


/* version 1 */
.mark1
{
    position: relative;
    top: 2px;
    width: 150px;
    height: 21px;
    transition: all 1.0s;
    vertical-align: bottom;
    display: inline-block;
    overflow: hidden;
    white-space: pre;
}

.mark1 span
{
    position: relative;
    top: -2px;
    height: 23px;
    display: inline-block;
    background: #cccccc;
}

.mark1.hidden
{
  width: 0px;
  transition: all 1.0s;
}


/* version 2 */
.mark2
{
    position: relative;
    transition: all 1.0s;
    vertical-align: bottom;
    background: #00ff00;
}

.mark2 span
{
    position: relative;
    padding: 0px 0px 0px 0px;
    background: #cccccc;
}

.mark2.hidden
{
  font-size: 0px;
  transition: all 1.0s;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>example</title>
  <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
</head>

<body>


<button onclick="
const collection = document.getElementsByClassName('mark1');

for (let i = 0; i < collection.length; i++) {
collection[i].classList.toggle('hidden');
}
">toggle version 1</button>

<div class="section">
<div class="paragraph paragraph1">
Lorem Ipsum is<mark class="mark1"> <span>simply dummy text of</span></mark> the printing and typesetting industry. <mark class="mark1"><span>Lorem Ipsum</span> </mark>has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>



<button onclick="
const collection = document.getElementsByClassName('mark2');

for (let i = 0; i < collection.length; i++) {
collection[i].classList.toggle('hidden');
}

">toggle version 2</button>

<div class="section">
<div class="paragraph paragraph2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the<mark class="mark2"> <span>industry's standard dummy text ever since the 1500s</span></mark>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

</body>

</html>