Task: place a map icon next to Address

enter image description here

Due to the long text "#ABC (Text1 / Text2)" the icon below "runs away" from Address. If the text is reduced, the icon will become closer:

enter image description here

HTML code:

<div class="block"> <div class="data"> <table> <tr><td><h4 class="name">#ABS (Text1 / Text2)</h4></td></tr> <tr> <td><h4 class="test">Address</h4></td> <td><i class="fas fa-map-marker-alt"></i></td> </tr> </table> </div> <div class="state"> <table> <tr><td><h4 class="name">Состояние</h4></td></tr> <tr><td><span class="tag is-info">Готов</span></td></tr> </table> </div> </div>

CSS code:

 .block { width: 95%; padding: 1.8em; margin-bottom: 7%; border: 1px solid #77889978; border-radius: 8px; position: relative; } .data { position: absolute; bottom: 0.35em; left: 1.3em; } .ev-state { position: absolute; bottom: 0.5em; right: 1.3em; } .name { color: #C0C0C0; font-size: smaller; }

How to fix it?

  • one
    Do not use tables where they are not needed - Nikita Umnov
  • I need to align the elements to a friend relative to a friend. How to implement it correctly? - Alex Garison pm
  • flex, for example, or inline-block. The table can also be solved by simply placing the icon in the same cell with the text. But it is better to get rid of the table, it is a bad practice - tables for tables. - Nikita Umnov 2:46 pm
  • @AlexGarison, so they evened out. If you are not satisfied, then it is not necessary. - Qwertiy ♦

0