Div float on two sides with a vertical line separating them - css

Question

I am trying to create two div elements floating side by side in the middle of the screen horizontally and vertically. But they are not getting displayed accurately.
here's the visual
Image 1
Image 2
Here's my HTML
<div id="config">
<button class="echo-test-button" id="connect" ng-click="connect()">
Connect
</button>
<button class="echo-test-button" id="disconnect" ng-click="disconnect()">
Disconnect
</button>
<strong> Message</strong>
<input type="text" ng-model="message" maxlength="40" placeholder="Enter Message Here" ng-disabled="isConnected"/>
<button class="echo-test-button" id="sendMessage" ng-click="sendMessage(message)" ng-disabled="isConnected">
Send
</button>
</div>
<div id="log">
<strong>Log</strong>
<div id="consoleLog">
</div>
<button class="echo-test-button" id="clear" ng-click="clearLog()">
Clear
</button>
</div>
CSS File
#cofig{
float: left;
}
#log{
float: left;
margin-left: 20px;
padding-left: 20px;
width: 350px;
border-left: solid 1px #cccccc;
}

Answer 1

You have a width on your #log div but not on your #cofig div. This is going to mean that your #cofig div is going to take up 100% of the width.
Try making each of your divs have a width of 50%, or slightly less if you have margins/padding.

Answer 2

Try with flex, get the two elements, delete that css, and put this:
.contenedor{
display:flex;
flex-wrapper:nowrap;
}
.config{
background-color:red;
}
.log{
background-color:blue;
}
.config, .log{
padding:25px;
}
<div class="contenedor">
<div class="config">
lorem ipsum
</div>
<div class="log">
lorem ipsum
</div>
</div>
And from that, do whatever you want.
Hope it works for you!