Use CSS to move charts close to each other

I have two charts. One is bigger than the other. The bigger one consist of two labels called a and b. The small one consist of label c and d. Code for both charts are similar as the following.

var chart = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ['a', 30],
            ['b', 50],
        ],
        type : 'donut'

    },


});


var chart = c3.generate({
    bindto: "#chart1",
       size: {
        height: 200,
        width: 450
    },
    data: {
        columns: [
            ['c', 50],
            ['d', 50],
        ],
        type : 'donut'

    },


});

I was wondering if it is possible to move the small chart between the empty space in the big chart. So they end up looking like two layered charts. I did inspect element on the small chart and tried to use css to tweak the transform="translate(225,83)" to different values. However i noticed when the small chart got close to the bigger chart parts of it disappeared.

I am not expert in css or charting libraries and would love inputs on how to achieve this. Here is my FIDDLE