orgmode - html export image and code top alignment

Question

This pgfplot gallery is excellent. I try to use org mode to generate similar html but the image and code block not align.

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD: .example {background-color:#eff0f1;}
#+HTML_HEAD: .org-src-container {width:65%; float:right; vertical-align:top; background-color:#ccccff;}
#+HTML_HEAD: img {width:33%; background-color:#f5f5cc;}
#+HTML_HEAD: </style>
#+OPTIONS: html-postamble:nil

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_0.png :results raw file :exports both
\begin{tikzpicture}
\begin{axis}[
    xmin=-3,   xmax=3,
    ymin=-3,   ymax=3,
    extra x ticks={-1,1},
    extra y ticks={-2,2},
    extra tick style={grid=major},
]
    \draw[red] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{0}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
      % see also the documentation of 
      % 'axis direction cs' which
      % allows a simpler way to draw this ellipse
    };
    \draw[blue] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{1}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
    };
    \addplot [only marks,mark=*] coordinates { (0,0) };
\end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example.png]]

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_1.png :results raw file :exports both
\begin{tikzpicture}
    \begin{axis}[
        xlabel=Cost,
        ylabel=Error]
    \addplot[color=red,mark=x] coordinates {
        (2,-2.8559703)
        (3,-3.5301677)
        (4,-4.3050655)
        (5,-5.1413136)
        (6,-6.0322865)
        (7,-6.9675052)
        (8,-7.9377747)
    };
    \end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example_1.png]]

Current output:

The left image should top align the right code block!

Answer 1

Use absolute position,adjust some margin,padding property (image at right):

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD: pre {box-shadow:none; margin: 1pt; background-color:#ccccff;}
#+HTML_HEAD: .example {background-color:#eff0f1;}
#+HTML_HEAD: #content {position: absolute;}
#+HTML_HEAD: .org-src-container {width:65%; display:inline-block; vertical-align:top; margin:1pt;}
#+HTML_HEAD: .figure {width:32%; display: inline-block; padding: 2pt;}
#+HTML_HEAD: .figure p {margin: 0;}
#+HTML_HEAD: img {width:100%; background-color:#f5f5cc;}
#+HTML_HEAD: </style>
#+OPTIONS: html-postamble:nil

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_0.png :results raw file :exports both
\begin{tikzpicture}
\begin{axis}[
    xmin=-3,   xmax=3,
    ymin=-3,   ymax=3,
    extra x ticks={-1,1},
    extra y ticks={-2,2},
    extra tick style={grid=major},
]
    \draw[red] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{0}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
      % see also the documentation of 
      % 'axis direction cs' which
      % allows a simpler way to draw this ellipse
    };
    \draw[blue] \pgfextra{
      \pgfpathellipse{\pgfplotspointaxisxy{0}{0}}
        {\pgfplotspointaxisdirectionxy{1}{1}}
        {\pgfplotspointaxisdirectionxy{0}{2}}
    };
    \addplot [only marks,mark=*] coordinates { (0,0) };
\end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example.png]]

#+HEADER: :fit yes :imagemagick yes :iminoptions -density 300
#+HEADER: :packages '("\\usepackage{tikz} \\usepackage{pgfplots} \\pgfplotsset{compat=newest}")
#+BEGIN_SRC latex :file example_1.png :results raw file :exports both
\begin{tikzpicture}
    \begin{axis}[
        xlabel=Cost,
        ylabel=Error]
    \addplot[color=red,mark=x] coordinates {
        (2,-2.8559703)
        (3,-3.5301677)
        (4,-4.3050655)
        (5,-5.1413136)
        (6,-6.0322865)
        (7,-6.9675052)
        (8,-7.9377747)
    };
    \end{axis}
\end{tikzpicture}
#+END_SRC

#+RESULTS:
[[file:example_1.png]]

New result: