Home > Mobile >  Display an element after a block line brea
Display an element after a block line brea

Time:11-09

I currently have this : enter image description here

And I want to put the icon div at the end of the text, but because it a 'block' I can't make it work.

Output wanted : enter image description here

Code snippet :

* {
  font-family: Arial, 'sans-serif'
}

.test {
  display: flex;
}

.info {
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}
<div >
    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div >i</div>
</div>

CodePudding user response:

  1. Remove display: flex from the container (.test)
  2. Make the info icon (.info) as inline-block with display: inline-block

* {
  font-family: Arial, 'sans-serif'
}

.info {
  display: inline-block;
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}
<div >
    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div >i</div>
</div>

  • Related