Issue with two floating divs and non-text elements - css

Question

I have created a wrapper div (ctccon) within which I have two divs both floating left so that they are positioned next to each other. This works fine until I add an image or table inside the right div (conright) and then the added element gets pushed below the left div (conleft).
My css
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float:left;
width:40%;
font-size:0.7em;
}
.ctccon .conright {
float:left;
font-size:1em;
}
And my html (without added elements)
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div </div>
</div>
and with added elements
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="pic1.jpg"> </div>
</div>
I know it's probably something I haven't understood re floats but I have not found a solution. Any pointers?
-----update-------
I have since removed the image and added a table inside conright. Still getting the same issue as per the image below:

Answer 1

It will be better if you share an image of your error but:
I recreated your code with an image, and with a table, and it doesn't get push to the bottom of the other div.
But let me explain what might be happening to you:
1: You have 2 div that are pushed left, if one of them gets to have an space, it will put itself below your other div, why? because is pushed left!, if it is pushed left and there is nothing next to it. It will take that space and do what is intended to, float left.
2: If you want your div to stay to the right, put in your css code float RIGHT, and it will be in the right ignoring your left div (as long as it doesnot take the whole screen).
3: If your image takes more that the 60% left of the space the other div has available, it will get push to the button to be able to fit the image.
To solve your issue I think you can add this to your code in your conright div:
.ctccon .conright {
float:left;
font-size:1em;
width: 60%;
}
Why do you have to this this?, because if you dont specify the width of this div, and its content takes more space that 60%, it will get push to the bottom
Please if this doesn't answer your question provide a picture of your error.

Answer 2

that depends on the size of the image:
If the image plus the text become wider than the space left by the first div, it will go below the first div.
But you can add a width to the second div to avoid that - any width up to 60% should work.
Addition / snippet:
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float: left;
width: 40%;
font-size: 0.7em;
}
.ctccon .conright {
width: 60%;
float: left;
font-size: 1em;
}
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div>
</div>

Answer 3

After trying to make the floats work, I just ended up using grids instead and modified the CSS code as follows:
.ctccon {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
}
.conleft {
font-size:0.7em;
}
.conright {
font-size:1em;
}
Now I get the layout I intended to get:
The added benefit to doing it this way, I suppose, will be making it easier to make the website responsive. I am using scss and breakpoints so I'd just need to change the css slightly for each breakpoint.