How to create a viewtemplate to float the TheBrain (echarts) to the right of tiddler text field using Shiraz/flexgrid/autolayout-with-image

This issue also got fixed based on this reply from @EricShulman in another thread. Thank you @EricShulman

Here is the current code I am using.


<$let stateID={{{ [[$:/temp/abc/]addsuffix{!!title}addsuffix<qualify>] }}}>
   <$reveal type="nomatch" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="show" class="mybutton" >
         {{$:/core/images/info-button}}
      </$button>
   </$reveal>
   <$reveal type="match" state=<<stateID>> text="show">
      <$button set=<<stateID>> setTo="hide" class="mybutton" >
         {{$:/core/images/info-button}}
      </$button>
<$list filter="[all[current]!is[system]!is[shadow]!tag[$:/tags/SideBar]!tag[Journal]!tag[$:/tags/ViewTemplate]!tag[$:/tags/Stylesheet]!tag[tweaks]!TheBrain[no]!has[page-cover]]">
<div class="rightside">

{{||Bottom Tabs for viewtemplate - without folding}}
</div>

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:50%;
  position: relative;
  float:right;
  right:0;
	}

</style>
</$list>
</$reveal>

<style>
.mybutton {float:right}
.mybutton {margin-top: -25px}
</style>