Use table layout for orange bar + title

Change-Id: I4030555c74dabdf1646a73a58f380c9432f5b127
diff --git a/inst/rmarkdown/templates/posterdown_ids/resources/template.html b/inst/rmarkdown/templates/posterdown_ids/resources/template.html
index 4219c9b..f6a2036 100644
--- a/inst/rmarkdown/templates/posterdown_ids/resources/template.html
+++ b/inst/rmarkdown/templates/posterdown_ids/resources/template.html
@@ -67,11 +67,13 @@
 padding: 0cm;
 }
 .title_container {
-width: $if(titlebox_borderwidth)$calc(100% - $titlebox_borderwidth$ - $titlebox_borderwidth$)$else$100%$endif$;
-height: $if(titlebox_borderwidth)$calc($if(titlebox_height)$$titlebox_height$$else$7.5%$endif$ - $titlebox_borderwidth$ - $titlebox_borderwidth$)$else$$if(titlebox_height)$$titlebox_height$$else$7.5%$endif$$endif$;
+display: table;
+min-height: 5%;
+margin-bottom: 0.75%;
 overflow: hidden;
-border: $if(titlebox_borderwidth)$$titlebox_borderwidth$$else$0$endif$ solid $if(titlebox_bordercol)$$titlebox_bordercol$$else$$if(primary_colour)$$primary_colour$$else$#f57c14$endif$
-$endif$;
+}
+.title_row {
+  display: table-row;
 }
 .title_container0 {
 margin-top: 7%;
@@ -82,11 +84,9 @@
 $endif$;
 }
 .orange_bar {
-float: left;
 width: 15%;
-height: 90%;
 background-color: $if(primary_colour)$$primary_colour$$else$#f57c14$endif$;
-display: flex;
+display: table-cell;
 align-items: left;
 border-right: 5%;
 justify-content: left;
@@ -111,16 +111,11 @@
 }
 .poster_title {
 text-align: left;
-position: relative;
-float: left;
-margin-left: 2.5%;
+display: table-cell;
+padding-left: 2.0%;
 margin-right: 0;
 width: 80%;
-height: 100%;
 color: $if(title_textcol)$$title_textcol$$else$#000000$endif$;
-top: 50%;
-transform: translateY(-50%);
--webkit-transform: translateY(-50%);
 }
 #title {
 font-family: $if(titletext_fontfamily)$$titletext_fontfamily$$else$$if(font_family)$$font_family$$else$"Fira Sans Semibold"$endif$$endif$;
@@ -640,6 +635,7 @@
 </div>
 </div>
 <div class="title_container">
+<div class="title_row"
 <!-- Orange Bar  -->
 <div class="orange_bar">
 </div>
@@ -651,7 +647,7 @@
 $if(affiliation)$<h5 id="affiliation">$for(affiliation)$<sup>$affiliation.num$</sup>&#x202f;$affiliation.address$$sep$; $endfor$</h5>$endif$
 </div>
 </div>
-
+</div>
 <div class='poster_body_wrap'>
 
 <div class='poster_body'>