Image and text next to each other

Hey @ddutt,

Why not use our beloved markdown ? :smiley:, I whipped up something for you it might do the job better for you.

import streamlit as st
import base64

LOGO_IMAGE = "logo.png"

st.markdown(
    """
    <style>
    .container {
        display: flex;
    }
    .logo-text {
        font-weight:700 !important;
        font-size:50px !important;
        color: #f9a01b !important;
        padding-top: 75px !important;
    }
    .logo-img {
        float:right;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.markdown(
    f"""
    <div class="container">
        <img class="logo-img" src="data:image/png;base64,{base64.b64encode(open(LOGO_IMAGE, "rb").read()).decode()}">
        <p class="logo-text">Logo Much ?</p>
    </div>
    """,
    unsafe_allow_html=True
)

It will look like this,

Sorry for the abhorrent code though :laughing:
Hope it helps !

5 Likes