Hanging panel after user Click

I'm working on a small language learning app, in which the user can:

  1. save text and audio to read and listen later

  2. click on a word to add notes (translation and sentences)

  3. get some stats per language + other features

Regarding #2, I'm not sure how I handle the 'click on a word' event. Right now my UI looks like this:

a) before any word click

enter image description here

b) after click on a word and saving it

enter image description here

So, given a text, the user can click a word which will show up on the right panel. Now the user can enter the word translation and save it. The problem comes now: After saving the word, what do I do with the right panel? Do I keep it open, or do I hide it and show it again only on next click?

After saving a word, I find somewhat strange to have the right panel hanging with the last clicked word, specially if the user keeps scrolling and reading ahead. But If I hide the panel, it leaves a weird blank.

Any suggestions? Thank you!

NOTES:

1- The text is inside a scrolling div, so the right panel is always visible, no matter the text position.

2- I plan to highlight the clicked word, so the user doesn't get lost on the text.

Tags: