Wanting text to overflow into another div - html

Question

Beginner CSS question here.
I have the home page of a website I'm working on set out perfectly. I have two `divs
#desktop-navbar {
text-transform: uppercase;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 25px;
color: #000000;
font-family: Thasadith;
font-weight: 700;
}
#desktop-navbar #mobile-menu-link{
display: none;
}
#desktop-nav-wrapper nav li:hover {
font-weight: 900;
}
#desktop-nav-wrapper.solid {
transition: background-color 1s ease 0s;
background-color: #eeeeee;
}
#desktop-logo.solid-fonts {
transition: color 1s ease 0s;
background: linear-gradient(90deg, #000 100%, #000 0%) fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#desktop-nav-wrapper nav li.solid-fonts {
transition: color 1s ease 0s;
color: #000000;
}
#desktop-nav-wrapper {
font-weight: bold;
font-size: 18vw;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
height: inherit;
width: 100%;
display: flex;
position: absolute;
}
#home-colour-one {
height: inherit;
width: 33%;
background-color: #314455;
}
#home-colour-two {
height: inherit;
width: 67%;
background-color: #dddddd;
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<nav>
<ul id = "desktop-nav-content">
<li class="desktop-items">Casa</li>
<li class="desktop-items">Sobre Mi</li>
<li class="desktop-items">Servicio</li>
<li class="desktop-items">Galería</li>
<li class="desktop-items">Contacto</li>
<li id="mobile-menu-link"><a>Menu</a></li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-colour-one">
<h3>Bettoo Kaozink</h3>
</div>
<div id="home-colour-two" class="container">
</div>
</div>
</div>
side by side with different colours (I know I could use one div and use the CSS gradient method, but I want to add some sweet fade-in to both of these divs at a later point).
But I want to place the text on the halfway point between the two divs (so one half is in the blue and the other half is in the grey).
Right now, I only have the text in one div of the home page (home-colour-one), but I'd like it to be spread across the two. Is there a way I can get the text to overflow into the grey div (home-colour-two)? Or just have the text in a separate div and place on the point separating the two divs?
I also know I can have the H3 of Bettoo Kaozink in the nav bar, but that is something I want to avoid. As ideally, I would like Bettoo Kaozink centered vertically in the container.
Cheers

Answer 1

One way to approach this is by using flexbox by adding display: flex to the container. If you haven't learned about how flexbox works, I'd recommend you to read up on this article.
I've created a mini prototype here of what you wanted. There are two things you should do to the JSFiddle in advanced to help you understand the code a bit better:
On line 15 of the CSS code, change the flex-grow property to some other value.
Use JavaScript to center the text relative to the div-container
Once you understand flexbox, it opens a door to so many different options that you can choose from.
I hope that it works out for you. If not, just tell me in the comments.

Answer 2

Honestly the structure of your page, based on what I can understand from here, it's not so solid.
Anyway, just in this context, and if I get right your goal, so having your h3 (or whatever text container you will add then) floating between the two divs [id="home-colour-one" and id="home-colour-two"], and centered vertically, a solution would be adding this ad the end of your CSS:
/* ADD THIS!!!*/
#home-colour-one h3 {
position: absolute;
top:50%; left:16.5%;
transform: translateY(-50%);
}
Here a JS Bin: https://jsbin.com/ralicul/edit?html,css,output