My HTML code:-

<div class='store_detail-level1'>
    <span class='book_name'>How To Avoid Climate Disaster</span>
    <br>
    <span class='author_name'>Bill Gates</span>
</div>

I want like this

 How To Avoid Climate Disaster
                             by Bill Gates

Key Points:-

1. content of class 'book_name' is dynamic, which means it's from the database
2. It must be responsive

Responsive means for mobile screen itr may be like:-

How To Avoid Climate
Disaster
       by Bill Gates

CodePudding user response：

var divwidth = document.getElementById('getthisid').clientWidth;
document.getElementById("setthisid").style.marginLeft = divwidth 'px';

.store_detail-level1{
  display:inline-block;
}

<div id='getthisid' class='store_detail-level1'>
  <div class='book_name_container'>
    <span class='book_name'>How To Avoid Climate Disaster</span>
  </div>
    
  <div id='setthisid' class='author_name_container'>
    <span class='author_name'>by Bill Gates</span>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>