Need help with the css for ace-diff element

[ajinkyasurya]

I am pretty sure this is css question and might not be related to ace-diff. However, I am having tough time finding a solution online and wanted to know if you have come across a solution for this simple problem.

I am trying to use ace-diff as yml editor and want to place a submit button right after the acediff content. I have currently managed to get it working to this point:

As you can see, my button is at the top of acediff content currently. I want it so that I can position button after the acediff element. Since acediff ONLY seems to work in absolute position, I am having a hard time placing button correctly on the html page.
html:

<div class="wrapper">
  <h3>Edit Application </h3>
  <div class="acediff"></div>
  <div class="submit-editor-button">
    <button class="ui button teal"
            type="button"
            (click)="save()">Save</button>
  </div>
</div>

css:

.acediff {
  position: absolute;
  left: 0;
  height: 75%;
  width: 100%;
}

.wrapper {
  position: static;
}

.submit-editor-button {
  position: absolute;
}

Help is greatly appreciated. Thank you.
(Sorry about creating an issue but I'm hoping it will be helpful to other css newbies like me trying to use acediff.)

[JackuB]

Hey, there are multiple issues with your CSS. You are setting multiple things to a position: absolute and not giving them any coordinates other than left: 0. Without any content inside, because everything is set to position: absolute, your .wrapper class will collapse to a short div, so doing height: 100% will do nothing.

If you are struggling with a layout take a look at some ready-made grid system (I see you are using some CSS framework - Semantic UI by any chance?) - there are basic grids like https://semantic-ui.com/examples/grid.html or https://getbootstrap.com/docs/4.1/layout/grid/ or take a look at the CSS Grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Feel free to reopen this issue.