JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div data-sideways="true">

  <div data-sideways-label="what | we do"></div>
  <div data-sideways-label="what we | do"></div>
  <div data-sideways-label="abc | def"></div>
  <div data-sideways-label="what we | do"></div>
  <div data-sideways-label="what we | do"></div>
  <div data-sideways-label="what we | do"></div>

</div>

CSS

div > div {
  padding: 100px;
  border: 1px solid black;
  margin-bottom: 20px;
}

/* [data-sideways-label]:before {
  content: attr(data-sideways-label);
  white-space: pre;
} */

.sideways-label span {
  display: block;
}

JavaScript

$('[data-sideways="true"]').children().each(function(){
	$(this).prepend("<div class='sideways-label'></div>")
	let parent=$(this);
  let sideways=$(this).data('sideways-label').split(" | ");
  
  $.each(sideways, function(index, value){
  	parent.find('.sideways-label').append('<span>' + value + '</span>')
  });
});