Как сделать вертикальную линию с рисунком между адаптивными блоками?

Question

[petersem]

.row{
  display: flex;  flex-wrap: wrap;  height: 100%; justify-content:center;
}
.col1 {
  width:300px;
  float:left;
  box-shadow: inset -1px 0 0 black;
  padding-right:20px;
}
.col2 {
  width:300px;
  float:left;
  margin-left:20px;
}
.romb {
  padding-left:101%; padding-   top:-3px;  content:'';         display:block;
  margin-top: -5px;
}
.romb_2 {
  margin-left: -37px;           content:''; 
  display:block;
 }


<div class="row">
<div class="col1">
 <img src="https://w7.pngwing.com/pngs/873/252/png-transparent-computer-icons-diamond-shape-miscellaneous-angle-rectangle-thumbnail.png" alt="" width="33" height="33" class="romb"></div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ipsum at neque fermentum malesuada. Proin sed laoreet massa. Nullam ultricies erat a mauris finibus, eleifend elementum neque porttitor. Duis lacinia est mauris. Fusce bibendum ipsum at nibh vulputate, sit amet fermentum nibh porttitor. Aenean gravida semper felis at faucibus. Aliquam erat volutpat. Vivamus et augue ipsum. Fusce id tellus vel turpis aliquam tincidunt pellentesque ac dolor. In hac habitasse platea dictumst. Suspendisse potenti. Duis tempor eget tortor sodales placerat. Ut ac elit ex.</div>
</div>
<div class="row">
<div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed ipsum at neque fermentum malesuada. Proin sed laoreet massa. Nullam ultricies erat a mauris finibus, eleifend elementum neque porttitor. Duis lacinia est mauris. Fusce bibendum ipsum at nibh vulputate, sit amet fermentum nibh porttitor. Aenean gravida semper felis at faucibus. Aliquam erat volutpat. Vivamus et augue ipsum. Fusce id tellus vel turpis aliquam tincidunt pellentesque ac dolor. In hac habitasse platea dictumst. Suspendisse potenti. Duis tempor eget tortor sodales placerat. Ut ac elit ex.<div>
 </div></div>
<div class="col2">
  <img src="https://w7.pngwing.com/pngs/873/252/png-transparent-computer-icons-diamond-shape-miscellaneous-angle-rectangle-thumbnail.png" alt="" width="33" height="33" class="romb_2">
</div>
</div>

Если делаешь ширину блока в процентах, то все ломается.

Comments

[Максим]

Для чего float ?
В romb_2 не будет работать content

[petersem]

Для чего float ?

Случайно затесался

copy-paste от romb

[Ankhena]

petersem, сделать обычными псевдоэлементами с абсолютным позиционированием.
В зависимости от количества элементов псевдо можно делать как самим элементам, так и родителю.
Если элемента 2 или 3, то удобнее родителю и размещать гридами или флексами, а не абсолютом.