blue box attached to green box and if we have enough space its shoud be right to green box for 10px. But if we don't have enough space in red box, then blue box should move into green box and overlap it, but it should be inside red box

I am not able to insert screenshots here, so check the link below I have described my problem in https://jsfiddle.net/rkd69mfu/1/

<div class='wrapper'>
  <div class='message'>
    <div class='message__content'>
          <span>some content</span>
          <div class='message__content-menu'></div>
    </div>
  </div>
</div>

.wrapper {
  width: 50%;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
}

.message {
  width: 100%;
  height: 30px;
  border: 1px solid red;
}

.message__content {
  width: 90%;
  height: 15px;
  border: 1px solid green;
  position: relative;
}

.message__content-menu {
  position: absolute;
  width: 20px;
  height: 10px;
  border: 1px solid blue;
  left: 100%;
  margin-left: 10px;
}

What I have What I need