How to bring a </div> closer to its <div> using React/Angular/Vue?

You have a really thoughtful question. I feel that my answer is a bit simple, so perhaps I misunderstood the goal of your question.

React and Vue leverage components to organize templates and abstract away the complexity of the DOM. You can encapsulate as much behavior as you'd like inside of these components.

From a Vue POV (though react has similar tools to accomplish the same goals)... if you're going for fewer lines of code, you could encapsulate the entirety of the "left" and "right" (their behavior, styles, and templates) as components*. If the two components do not share any state or data, this becomes very simple and clear as you do not need to pass any props down.

---

Code example (in Vue)

This is an overly simple example and usually MyPage.vue would have additional behavior, such as loading, animations, or setting up the initial app's data.

// MyPage.vue
<template>
    <div>
         <v-left/>
         <v-right/>
    </div>
</template>

<script>
import VRight from '@/components/right.vue';
import VLeft from '@/components/left.vue';

export default {
    components: {
        VRight,
        VLeft
    }
}
</script>

---

Finally, this might be a bit too covered in Vue terminology, but for some great illustrations of code organization (for any language or framework) are in this document.

The measure of code complexity is not only in lines of code in a given function but also in the number of places you need to touch when implementing something or the risk of breaking other areas of the code.

One of the most brittle areas of frontend code is CSS, this is why packaging CSS with components (either using a CSS-in-JS approach or using Vue's scoped styles) makes a huge improvement in the stability and reusability of the code you write.

I hope this was helpful!!

* (there are reasons why doing this isn't the best choice in a lot of cases)