JSFiddle - React, Tailwind, and code Playground

by Maxim

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.17.3/lodash.min.js"></script>
<!-- requires matching text to be aligned with right paddings -->
<div class="one" style="display:none">
    + 
   +++
    + 
</div>

<div class="two" style="display:none">
    + +   ++++  + ++  + + +
    + ++ +++ + +++ ++ + +++
    + ++ + + ++ + + + + ++ 
</div>

<div class="target">
</div>

JavaScript

const two=document.getElementsByClassName("two")[0].innerHTML.split('\n')
const one=document.getElementsByClassName("one")[0].innerHTML.split('\n')
document.getElementsByClassName("target")[0].innerHTML=((pos=findTextBin(two,one))
       ? `found at position ${pos}`
       : "not found")

function findTextBin(text,search) {
  const toBin=str=>str.split('')
  .reduce((res,c)=>res<<1|(c==='+'?1:0),0)
  let one=search.map(toBin)
  let mask=toBin(_.max(one).toString(2).split('').map(c=>'+').join(''))
  let two=text.map(toBin)
  let length=_.max(text.map(str=>str.length))
  for(let i=length; i; i--,two=two.map(num=>num>>1))
    if(two.every((num,row)=>(num&mask)===one[row]))
      return i-mask.toString(2).length+1;
  return false;
}