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!