Tip: How to expand code editor width(element customization, js and css view)

For editing JS and CSS, I find editor width too narrow to edit code and and in full width the whole preview is hidden. So, have been using custom width variable for editor view and load it from chrome extension.

What I use, is extension Live editor for CSS, Less & Sass - Magic CSS and make it load on certain site without opening the extension (the pin button on extension). I just overwrite editor width variable in extension:

.cs-code-editor-wrapper.cs-active{
    --d-workspace-w: 700px;
}