Notebook post-it style menu in html&css - html

Question

I want to create a menu like notebook post-it papers. Seems like this:
Basically want to place two divs side by side and make left div a page, and right div a menu. And if the height of page increased, the space between two menu elements should be expand proportionally. I have been trying for 2 days and the code is like that:
<div class="specific_recipeBook_withStickers">
<div class="specific_recipeBook">
<div class="specific_recipeBook_spiral"></div>
<div class="specific_recipeBook_main">
<ul class="specific_recipeBook_list">
<li class="specific_recipeBook_list_unit">
<div class="specific_recipeBook_main_lines"></div>
<a class="specific_resipeBook_list_unit_text" ><h4 id="specific_resipeBook_list_unit_name">Kuru Fasulye</h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi u</a>
</li>
</ul>
</div>
</div>
<div class="specific_recipebook_stickers">
<div class="specific_recipeBook_sticker" id="recipeBook_stickers_1" ><a class="specific_recipeBook_stickers_text">Salata</a> </div>
<div class="specific_recipeBook_sticker" id="recipeBook_stickers_2" ><a class="specific_recipeBook_stickers_text">Tatlı</a></div>
<div class="specific_recipeBook_sticker" id="recipeBook_stickers_3" ><a class="specific_recipeBook_stickers_text">Yan Yemek </a></div>
<div class="specific_recipeBook_sticker" id="recipeBook_stickers_4" ><a class="specific_recipeBook_stickers_text">Anayemek </a></div>
</div>
</div>
JSFiddle
But it is not working well. What way should I use to do?

Answer 1

use something like this function
$(document).ready(function ($) {
$(".specific_recipeBook").each(function(j,d) {
var maxHeight = 0;
maxHeight = $(d).height();
var ratioedHeight = maxHeight*0.08;
console.log(maxHeight);
document.getElementById("recipeBook_stickers_1").style.marginBottom = 3+ ratioedHeight+"px";
document.getElementById("recipeBook_stickers_1").style.marginBottom = 3+ ratioedHeight+"px";
document.getElementById("recipeBook_stickers_2").style.marginBottom = 3+ ratioedHeight+"px";
document.getElementById("recipeBook_stickers_3").style.marginBottom = 3+ ratioedHeight+"px";
document.getElementById("recipeBook_stickers_4").style.marginBottom = 3+ ratioedHeight+"px";
});
});