How to put 2 words one below the other when using css grid

Question

I have 2 words which need to be put one below the other regardless of the screen size.

The words something and else need to be on separate lines

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.colA {
  border: 1px solid red;
}

.colB {
  border: 1px solid grey;
  word-break: break-all;
}

<div class="wrapper">
    <div class="colA">something</div>
    <div class="colB">something else</div>
</div>

Fiddle example: https://jsfiddle.net/kq3sf6ae/

Answer 1

Add word-spacing: 100vw;

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.colA {
  border: 1px solid red;
}

.colB {
  border: 1px solid grey;
  word-break: break-all;
  word-spacing: 100vw;
}

<div class="wrapper">
    <div class="colA">something</div>
    <div class="colB">something else lt hhjjhhjjhh hhjjhhhjhbhbbbhhjjhhhjhbhbbbhhjjhhhjhbhbbhhjjhhhjhbhbbbb</div>
</div>