Как сделать так, чтобы вторая строка переносимого текста отображалась под первой, как на картинке:

Question

есть ли способ заставить вторую строку текста выглядеть так, как если бы она имела отступ слева (или что-то), чтобы он находился непосредственно под тем местом, где начинается первая?

Я знаю, что могу достичьаналогичный результат с использованием <table>, но я бы очень не хотел, так есть ли другой способ?

.thumbs {width:30%;
position:relative;
top:45px;
transform:rotate(180deg);}

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="thumbs" viewbox="0 0 400 150"><path d="M141.05 67.45c0 3.601 1.649 7.05 4.2 9.3-1.801 2.4-2.551 5.4-2.25 8.4.6 6.3 6.3 11.4 12.899 11.4h19.5l-1.2 9.3c-.3 2.85-.3 5.25.301 7.649 2.25 9.75 10.949 16.65 21 16.65 2.25 0 4.5-.9 6.15-2.55 1.65-1.65 2.55-3.75 2.55-6v-12.3c0-5.4 1.5-10.5 4.351-15.15l5.25-8.4c.75-1.199 1.8-2.1 3-2.699 1.05 3.3 4.05 5.699 7.649 5.699h17.25c4.5 0 8.101-3.6 8.101-8.1v-50.55c0-4.5-3.601-8.101-8.101-8.101h-17.55c-4.5 0-8.1 3.601-8.1 8.101v1.2c-3.9-3.45-9-5.551-14.55-5.551h-38.101c-3.45 0-6.899 1.5-9.3 3.9s-3.6 5.55-3.45 8.85c0 1.2.15 2.25.601 3.45a12.478 12.478 0 0 0-6.75 11.101c0 1.649.3 3.3.899 4.8-2.7 2.551-4.349 6.002-4.349 9.601zm82.649-37.2c0-.3.301-.6.601-.6h17.399c.301 0 .601.3.601.6v50.551c0 .3-.3.6-.601.6h-17.55c-.3 0-.6-.3-.6-.6V30.25h.15zm-72.3 32.7c1.2-.6 2.101-1.649 2.4-3 .3-1.35 0-2.7-.9-3.75-.75-.899-1.05-1.95-1.05-3 0-2.399 1.8-4.5 4.2-4.95 1.5-.3 2.85-1.199 3.45-2.699.6-1.5.449-3-.45-4.351-.601-.75-.9-1.8-.9-2.85 0-1.2.45-2.55 1.351-3.45 1.05-1.05 2.55-1.65 4.05-1.65h38.1c7.95 0 14.55 6.45 14.55 14.551v27.6c-3.75.9-6.899 3.15-9 6.45l-5.25 8.399c-3.6 5.7-5.55 12.301-5.55 19.051v12.3c0 .3-.149.6-.3.75-.15.149-.45.3-.75.3-6.6 0-12.15-4.5-13.65-10.8-.3-1.351-.449-3-.149-4.95l1.35-10.5c.3-1.8-.3-3.6-1.5-5.1-1.2-1.351-3-2.25-4.8-2.25h-20.7c-2.55 0-5.1-2.101-5.399-4.5-.15-1.801.75-3.601 2.25-4.65 1.35-.9 2.1-2.55 1.949-4.2-.149-1.649-1.199-3-2.85-3.6-1.95-.75-3.15-2.55-3.15-4.65-.151-1.951.899-3.6 2.698-4.501z"/></symbol></svg>

<div class="text-with-borders" style="margin: 0 auto;display:block;;text-align: left;
max-width:600px;">
<p><svg class="thumbs" role="img"><use xlink:href="#thumbs" /></svg>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore
</div>

Answer 1

Делать это с помощью Flexbox - действительно хорошее решение:

.thumbs {
  width: 30%;
  position: relative;
  /*top: 45px;*/
  transform: rotate(180deg);
}

.text-with-borders {
  display: flex; /* displays flex-items (children) inline */
  align-items: center; /* centers them vertically */
  margin: 0 auto;
  max-width: 600px;
  /*text-align: left;*/
}

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="thumbs" viewbox="0 0 400 150"><path d="M141.05 67.45c0 3.601 1.649 7.05 4.2 9.3-1.801 2.4-2.551 5.4-2.25 8.4.6 6.3 6.3 11.4 12.899 11.4h19.5l-1.2 9.3c-.3 2.85-.3 5.25.301 7.649 2.25 9.75 10.949 16.65 21 16.65 2.25 0 4.5-.9 6.15-2.55 1.65-1.65 2.55-3.75 2.55-6v-12.3c0-5.4 1.5-10.5 4.351-15.15l5.25-8.4c.75-1.199 1.8-2.1 3-2.699 1.05 3.3 4.05 5.699 7.649 5.699h17.25c4.5 0 8.101-3.6 8.101-8.1v-50.55c0-4.5-3.601-8.101-8.101-8.101h-17.55c-4.5 0-8.1 3.601-8.1 8.101v1.2c-3.9-3.45-9-5.551-14.55-5.551h-38.101c-3.45 0-6.899 1.5-9.3 3.9s-3.6 5.55-3.45 8.85c0 1.2.15 2.25.601 3.45a12.478 12.478 0 0 0-6.75 11.101c0 1.649.3 3.3.899 4.8-2.7 2.551-4.349 6.002-4.349 9.601zm82.649-37.2c0-.3.301-.6.601-.6h17.399c.301 0 .601.3.601.6v50.551c0 .3-.3.6-.601.6h-17.55c-.3 0-.6-.3-.6-.6V30.25h.15zm-72.3 32.7c1.2-.6 2.101-1.649 2.4-3 .3-1.35 0-2.7-.9-3.75-.75-.899-1.05-1.95-1.05-3 0-2.399 1.8-4.5 4.2-4.95 1.5-.3 2.85-1.199 3.45-2.699.6-1.5.449-3-.45-4.351-.601-.75-.9-1.8-.9-2.85 0-1.2.45-2.55 1.351-3.45 1.05-1.05 2.55-1.65 4.05-1.65h38.1c7.95 0 14.55 6.45 14.55 14.551v27.6c-3.75.9-6.899 3.15-9 6.45l-5.25 8.399c-3.6 5.7-5.55 12.301-5.55 19.051v12.3c0 .3-.149.6-.3.75-.15.149-.45.3-.75.3-6.6 0-12.15-4.5-13.65-10.8-.3-1.351-.449-3-.149-4.95l1.35-10.5c.3-1.8-.3-3.6-1.5-5.1-1.2-1.351-3-2.25-4.8-2.25h-20.7c-2.55 0-5.1-2.101-5.399-4.5-.15-1.801.75-3.601 2.25-4.65 1.35-.9 2.1-2.55 1.949-4.2-.149-1.649-1.199-3-2.85-3.6-1.95-.75-3.15-2.55-3.15-4.65-.151-1.951.899-3.6 2.698-4.501z"/></symbol>
</svg>

<div class="text-with-borders">
  <svg class="thumbs" role="img"><use xlink:href="#thumbs"/></svg>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore
</div>

Answer 2

Используйте display: flex свойство css, как показано ниже

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

  <div style="display:flex;">
<i class="fa fa-thumbs-o-up"></i>
<span  style="margin-left: 10px;">This is some text. This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.</span>
  </div>
</body>
</html> 

Используйте ваш html вот так Держите svg вне div

<div class="test" style="display: flex;">
   <svg>
      <use ...>
   </svg>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et 
   </p>
</div>