Как использовать CSS перед атрибутом как собственный столбец, как li в ul

Question

Здравствуйте, я искал с тех пор, я не знаю, возможно, я что-то упустил, но я не могу обернуть голову, что мне нужно 2 столбца, один генерируется через вставленный контент css, а другой должен быть обычным текстом контента, но япросто не понимаю.

Я хочу создать собственный список, поэтому мне нужно именно такое поведение

<ul><li></li></ul> 

    <div class="flex-container">
    Long Text is Here Long Text is Here Long Text is Here Long Text is 
Here Long Text is Here Long Text is Here Long Text is Here Long Text is 
Here Long Text is Here Long Text is Here This long Text Schould be 
<strong class="no-wrap">Importent: </strong> 
<strong class="no-wrap"> All in One single line &nbsp; </strong> 
i only need one colum for the before tag it should not wrap the text nodes 
before and after the strong nodes i need a 2 colum layout one col for the 
before css attr and one col for the rest of the text ignoring the strong

    </div>

@import "compass/css3";
.flex-container:before { 
counter-increment: h22; 
content: counter(h22) ". "; 
min-width: 0.8cm;    
}

.flex-container{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.no-wrap{
  flex-shrink: 0;
}

, оно должно выглядеть так:

• длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текст здесь длинный текстТекст должен быть Importent: все в одной строке Мне нужен только один столбец для тега before, он не должен переносить текстовые узлы до и после сильных узлов, мне нужен макет в 2 столбца, один столбец для before cssattr и один столбец для остальной части текста, игнорируя сильные

https://codepen.io/frank-dspeed/pen/KJMRwG

Answer 1

Поскольку я не получил ценные ответы вовремя, я теперь отвечу сам, я нашел, что решение с некоторыми экспериментами заняло у меня всего несколько часов, потому что я не знаком с такими ситуациями.

body { counter-reset: h21 h22 h23; }
.flex-container:before { 
    counter-increment: h22; 
    content: counter(h22) ". "; 
    min-width: 0.8cm;
    margin-left: -0.8cm;
    position: absolute;
  }
.flex-container { 
    position: relative;
    padding-left: 0.8cm;
    font-size: 11pt; 
    font-weight: normal; 
    margin: 0px;
    padding-bottom: 11pt;     
  /*disabled by me because if we choose flex this can't render right as it treats tags as cols*/
}

https://codepen.io/frank-dspeed/pen/xMOagZ