Module:Side box/styles.css

 /* {{pp|small=y}} */
 .side-box{
 margin:4px0;
 box-sizing:border-box;
 border:1pxsolid#aaa;
 font-size:88%;
 line-height:1.25em;
 background-color:var(--background-color-interactive-subtle,#f8f9fa);
 display:flow-root;
 }

 .side-box-abovebelow,
 .side-box-text{
 padding:0.25em0.9em;
 }

 .side-box-image{
 /* @noflip */
 padding:2px02px0.9em;
 text-align:center;
 }

 .side-box-imageright{
 /* @noflip */
 padding:2px0.9em2px0;
 text-align:center;
 }

 /* roughly the skin's sidebar + size of side box */
 @media(min-width:500px){
 .side-box-flex{
 display:flex;
 align-items:center;
 }

 .side-box-text{
 flex:1;
 min-width:0;
 }
 }

 @media(min-width:720px){
 .side-box{
 width:238px;
 }

 .side-box-right{
 /* @noflip */
 clear:right;
 /* @noflip */
 float:right;
 /* @noflip */
 margin-left:1em;
 }

 /* derives from mbox classes, which do not float left in mbox-small-left
 	 * so far as I can tell, that was a deliberate decision, since only .ambox
 	 * supports mbox-left
 	 */
 .side-box-left{
 /* @noflip */
 margin-right:1em;
 }
 }