How to keep elements in same line on hover?

Question

How to appear both words (comment, share) in the same line without break them, but still creating space on hover?

I have studied stackoverflow 1, 2 and some w3schools. The deactivated css in my code works only partially. Please help.

.dropdown{cursor:pointer}
.dropdown-content{display:none;z-index:2/*width:-webkit-fill-available;margin-right:5px;position:absolute*/}
.dropdown-content a{display:block}
.dropdown:hover .dropdown-content{display:block}

<span class="dropdown"><i><a style="margin-right:20px">comment</a></i><div class="dropdown-content"><form method="post"><div><input required placeholder="comment..." name="text" type="text" aria-label="Text"/></div><div><input value="post" type="submit"/></div></form></div></span>

<span class="dropdown"><i><a title="share">share</a></i><div class="dropdown-content"><div>
  
 <a href="https://facebook.com" target="_blank"><svg height="22" width="22" viewBox="0 0 20 20" version="1.1" aria-labelledby="title"><title>facebook</title><path d="M11,7.2h4.3v2.6H11V20H7.8V9.8H4V7.2h3.8V3.7c0-2,1.6-3.7,3.7-3.7h3.8v2.7h-2.9c-0.7,0-1.4,0.7-1.4,1.5V7.2z"></path></svg></a>

</div></div></span>

<br><img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" width="400" height="200"/>

could you be more specific? on hover of 'comments' and 'Share' where the hovered items should be seen? — Manjuboyz, Apr 14 '20 at 03:18
I appreciate your rapid reply. When I hover on "Comment" the "Share" appears below the comment form. I don't want that. What I wish to happen is the words "Comment" and "Share" to be in the same line whichever I hover. — NDi, Apr 14 '20 at 03:29
What about the contents when hovered, so that still should display below while pushing the image ? — Manjuboyz, Apr 14 '20 at 03:34
Yes, the content should still display below while pushing the image. — NDi, Apr 14 '20 at 03:41
Would you mind few more div wrapping together? reason all items are in block state and it will indeed what it is currently behaving. — Manjuboyz, Apr 14 '20 at 03:45
I wouldn't mind few more div wrapping together, as long as I get the result. I would appreciate your help. — NDi, Apr 14 '20 at 03:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211596/discussion-between-manjuboyz-and-nickdimou). — Manjuboyz, Apr 14 '20 at 03:55

Manjuboyz · Accepted Answer · 2020-04-14T03:59:17.820

Here you go, as said in comments I have added extra div to wrap both the items together, I hope that is not an issue:

.dropdown {
  cursor: pointer
}

.dropdown-content {
  display: none;
  z-index: 2/*width:-webkit-fill-available;margin-right:5px;position:absolute*/
}

#MainDiv {
  display: flex;
  flex-direction: row;
  padding-right: 10px;
  justify-content: space-between;
  width: 220px;
}

.dropdown:hover .dropdown-content {
  display: inline;
}

<div id="MainDiv">
  <div class="Comments">
    <span class="dropdown"><i><a style="">comment</a></i><div class="dropdown-content"><form method="post"><div><input required placeholder="comment..." name="text" type="text" aria-label="Text"/></div><div><input value="post" type="submit"/></div></form></div></span>
  </div>

  <div class="Share">
    <span class="dropdown">
<i>
<a title="share">share</a>
</i>

<div class="dropdown-content"><div>
  
 <a href="https://facebook.com" target="_blank"><svg height="22" width="22" viewBox="0 0 20 20" version="1.1" aria-labelledby="title"><title>facebook</title><path d="M11,7.2h4.3v2.6H11V20H7.8V9.8H4V7.2h3.8V3.7c0-2,1.6-3.7,3.7-3.7h3.8v2.7h-2.9c-0.7,0-1.4,0.7-1.4,1.5V7.2z"></path></svg></a>

</div></div></span>
  </div>
</div>



<br><img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" width="400" height="200" />

How to keep elements in same line on hover?

1 Answers1