It’s hard to give a complete answer without knowing how your components are set up, but there are a couple of HTML features that might help you, depending on whether you want to choose based on space above/below within the viewport, or above/below within the parent component.
If you want to do it based on space within the viewport, you can use Element.getBoundingClientRect() to find distance between the input and the top/bottom of the viewport:
const element = document.querySelector('input');
const elementRect = element.getBoundingClientRect();
const spaceAbove = elementRect.top;
const spaceBelow = window.innerHeight - elementRect.bottom;
if (spaceBelow < spaceAbove) {
// logic to render with more space above input
} else {
// logic to render with more (or equal) space on bottom
}<input />If you want to do it based on space within the parent component, you can use Element.offsetTop and Element.offsetHeight to calculate space between the input and the top/bottom of its closest positioned ancestor:
const element = document.querySelector('input');
const spaceAbove = element.offsetTop
const spaceBelow = element.parentNode.offsetHeight - (element.offsetTop + element.offsetHeight)
if (spaceAbove > spaceBelow) {
// do something
} else {
// do something else
}<div style="padding: 200px 0 100px 0; position:relative">
<input />
</div>