How to align Google Custom Search box?

Question

I want to align google custom search box to the left of my webpage. I'm using a website builder called imxprs. I use this code for my custom search box.

<script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

How can I do this? Optional: And if anybody is using imxprs, do you know how to make search box on the same line with the H1 of the blog element like in the picture>> Like this, I photoshoped it!

Answer 1

What you can do is wrap the <gcse:search></gcse:search> tags in a div and you can then apply properties on that div to meet your criteria like would do during normal course of development. Take a look at the code snippet

#searchContainer {
width: 49%;
float: right;
display: inline-block;
}

#heading {
display: inline-block;
width: 49%;
}

.container {
display: flex;
align-items: center;
}

<script>
  (function() {
    var cx = '013012496897428955507:iauh0vbao98';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="container">
<h1 id="heading">Articles</h1>
<div id="searchContainer">
<gcse:search></gcse:search>
</div>
</div>