Align last 2 level nested divs horizontally

Question

I am trying to override an HTML generated by a software. I cannot change the HTML, but however the software gives the ability to add inline CSS. These are nested blocks inside each other.

<div id='A'> DIV A
  <div id='B'> DIV B
    <div id='C'> DIV C
    </div>
  </div>
</div>

Here A>B>C. I have tried adding

#A > div {display:inline-blocks;} 

&

#A {
display: flex;
flex-direction: row; }

but somehow DIV C is always below DIV B since its coded under DIV B. Is there anyway, I can override the CSS. The output I am looking is something like below, with DIV B & DIV C aligned horizontally, shouldn't overlap different screen sizes

Answer 1

The only way to do that with css is to use position absolute on divs and to override something specificly you can use !important.

div a{
 position: relative;
 padding:0 15px;
}

div b {
 witdh:20%
}

div c{
 position: absolute;
 width:70%;
 bottom:0;
 right:15px;
}

This code would work for some resolutions once we're using percentage size, but you will need to check them and also improve the code if needed.

Would also being an option to display none div c and recreate it with Js outside of the div b.