Settings | Editor | General | Appearance | Enable HTML tag tree highlighting

let str4 = 'a_baba_galamaga_tvoe_korito_est_nesti';
let a4_from = 'k';
let a4_to = 't';

const f4 = (str, a, b) => {
  let strNew = str4.split('_');
  let res = strNew.find((word,index,arr) => {
    if (
      word.indexOf(a) !== -1 && 
      word.indexOf(b) !== -1 &&
      word.indexOf(b) - word.indexOf(a) > 0
    ){
      return true;
    }
  });
  document.querySelector('.out-4').innerHTML = (res !== undefined)
    ? res.slice(res.indexOf(a) + 1, res.indexOf(b))
    : `undefined`;
}

f4(str4, a4_from, a4_to);

Есть небольшие различия, но все же:
https://github.com/shock-dev/my-gulp

Возможно, я не совсем понял, что требуется, но если вы хотите блок, с заданной шириной, поместить в правый край, то можно родителю задать display: flex и выровнять
https://codepen.io/shock-dev/pen/xxpEXvw

Можно запретить перенос, используя flex'ы
https://codepen.io/shock-dev/pen/XWVjvNg

P.S: У вас после слова "Next" div закрывается не в том месте, я так же это учел.