All of our resize logic is working perfectly in the vertical direction.
I remember we eventually want to have a resize element between our code editor and the browser or the
preview window over here as well.
So it should look like this, something that we can grab onto and drag to resize the code editor.
So we're going to add in another edition or another copy of our sizable component.
We're going to wrap it around the code editor.
So whenever a user starts to drag this thing back and forth, they're going to resize just the code
editor component as they start to increase the size of the code editor and it starts to kind of get
larger.
That's going to naturally push the preview window a little bit more off to the right hand side.
And then as the user starts to shrink the code editor, that is going to allow the preview window to
start to expand towards the left.
That's how we're going to add in some horizontal resize as well.
So to get started, I'm going to go back over to my code editor.
I'm going to find my code cell to file.
Inside of here, I'm going to go down to our code editor component and I'm going to wrap that with another
instance of sizable.
And I'm going to provide a direction up to it of horizontal, because this sizable we wanted to allow
resizing in the horizontal direction, as you'd guess.
If we save this right now and flip back over, well, it definitely kind of breaks a lot of stuff.
That's because we have really only set up one set of props inside of our sizable component.
Remember, inside a very sizable right now, we are really only handling resizing in the vertical direction.
All these props are hard coded, so it doesn't really matter if we pass in a different direction right
now.
So our next big job, we need to take a look at this direction prop and then use that to decide all
the different values that we are providing to a sizable box.
So let's kick off that process in the next video.