I have a very specific question and I am not sure you can do what I want with css. For what I've seen on other posts, this might be out limits, but I thought I'd ask in case there are some css geniuses out there.
I want to achieve a very specific behaviour.
I have a column of text and some words in that column are highlighted. When you click the word, I want the text to split and a video to slide up. 

my html is simple:

```
<p>text<span id="clickable" class="link">highlighted text</span>.
    <div class="closed">
            <video id="video" width="100%">
                <source src="myVideo.mp4" type="video/mp4">
            </video>
    </div>text</p> 

```

the css contains the class closed (with height 0) and the class open with a certain height

css

```
.closed {
    overflow: hidden;
    height: 0px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
}

```

the js applies the class open when the text is clicked and plays the video, all very straight forward

JavaScript

```
$(document).ready(function() {
  $("#clickable").click(function() {
    var vid = document.getElementById("video");
    var closed = $('.closed');
    if(closed.hasClass("open")) {
      closed.removeClass('open');
      vid.pause();
    } else {
      closed.addClass('open');
      vid.play();
    }
  });
});

```

It all works. But here is the thing, and I know I am being picky so I am not sure if css can do this. The problem I have is that the text just after the "clickable" jumps to the next line. I want it to not do that as it disrupts the reading. I know this is happening because the div in which I have my video is a block element. But if I change the tag to make it a span (I know, a heresy), like so:

```
    <span class="closed">
            <video id="video" width="100%">
                <source src="myVideo.mp4" type="video/mp4">
            </video>
    </span>

```

the video refuses to follow the 

```
overflow: hidden;

```

rule and is just not hidden from sight which is the whole point of the thing I am trying to do. Adding 

```
display: inline-block;

```

to the div doesn't do it. I've experimented with some floats but I get erratic behaviour in Chrome. So I am running out of ideas. I want the video to behave like an inline element. Can someone just put me out of my misery and tell me it can't be done please so I can move on. Thanks for your time.

----------------------------------------------------------------EDIT-------------------------------------------------------------

Here is a gif of what my project looks like. This is with the "div" option, and it works like I want to except that as I was saying the after the video text is moving to the next line which I don't want.

GIF:

[![enter image description here](https://i.stack.imgur.com/3J9gD.gif)](https://i.stack.imgur.com/3J9gD.gif)