If you want to display two divs side by side, you could wrap then in a container div and float one of them left and the other one right.
To see this in action, create two sample galleries with JuiceboxBuilder-Lite.
Save one gallery in a folder named 'gallery1' and the other in a folder named 'gallery2'.
Now create a new HTML file with the code below, name it whatever you like, place it in the same directory as the two gallery folders and open it in a browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
#wrapper {
width: 100%;
}
#juicebox-container-1 {
float: left;
}
#juicebox-container-2 {
float: right;
}
</style>
</head>
<body>
<script src="gallery1/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: 'gallery1',
containerId: 'juicebox-container-1',
galleryWidth: '50%',
galleryHeight: '100%',
});
</script>
<script>
new juicebox({
baseUrl: 'gallery2',
containerId: 'juicebox-container-2',
galleryWidth: '50%',
galleryHeight: '100%',
});
</script>
<div id="wrapper">
<div id="juicebox-container-1"></div>
<div id="juicebox-container-2"></div>
</div>
</body>
</html>