how to display span in column above a marked word without overlapping one another

Question

I'm trying to tag classes to a word in a description.

In case if there are multiple tags need to be assigned to a word then I need to display those classes on top of the word one above other in a stack.

but as in the below example, the classes are getting overlapped on previous one. i.e class2 is overlapping class1 making it not visible. similarly class4 hides class3

I tried with css properties like flex, flex-direction, position,flex-basis but whatever the value I gave the UI was still getting messed up. this below code is the neat UI I got as for now for debugging purpose.


  Metaphysics continues asking "why" where 
  
    
      science class1
        class2
      
    
  
   of fundamental physics is based of fundamental physics is based of fundamental physics is based
  
    
      theory class3
        class4
      
    
  
   of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set.

Expected output

the classes should be shown in a column one above the other on top of word. Then the line height should grow/adjust accordingly. can anyone help me

class1
class2
Tagged Word

user_17752587 · Answer

compare your snippet if it does not will working fine then let me know into a comment below

mark{
  display:flex;
  flex-direction:column-reverse;
}
.child{
  display:inline-block;
  line-height: 1.7;
}

div .child:not(.last-child) {
  margin-bottom:10px;
}
/* make sure you add the last child to this class .last-child, because of we don't need to add extra margin to the last child element 
*/


  Metaphysics continues asking "why" where 
  
    
      science class1
        class2
      
    
  
   of fundamental physics is based of fundamental physics is based of fundamental physics is based
  
    
      theory class3
        class4
      
    
  
   of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set. of fundamental physics is based on some set.of fundamental physics is based on some set.

how to display span in column above a marked word without overlapping one another

1 Answers