Help for image alignment and code blocks

[julienguegan]

Hello all,

I would like to position a code block and an image side by side. I have already succeed to place text and image next to each other with the tag {: .align-right} but associated with a code block it does not seems to work ... For example, if I write the following in a post :

![image-right](/assets/images/gradient_descent.gif){: .align-right width="45%"}
'''python 
def gradient_descent(f, x0, alpha=0.01, itermax=1000):
    # initialization
    x, fx = np.zeros((itermax+1, len(x0))), np.zeros((itermax+1, 1))
    x[0,:] = x0
    # iterative loop
    k = 0
    while (k < itermax):
        grad_fxk = numerical_gradient(f, x[k,:], h=0.1)
        x[k+1,:] = x[k,:] - alpha * grad_fxk
        k = k+1
    return x
'''

The final rendering looks like this. The image does not appear and huge gap is created into the code block ...

Does someone know if it is just impossible to do it or if there is a trick/possibility with HTML ?

Thank you for your help !