JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-wrapper">
    <div class="menu-wrapper">
        <nav class="nav-wrapper">
            <ul class="nav">
                <li><a href="#">Menu One</a>

                    <div class="dropdown">
                        <ul>
                            <li><a href="#">Sub menu one</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu two</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu two</strong>Aliquam erat volutp.... Menu one - sub menu two Aliquam erat volutat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt. this is a long text menu i need make background grow with the text so that text is not aoutsiide the panel this is a long text menu i need make background grow with the text so that text is not aoutsiide the panel</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu three</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/business/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu three</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum...

CSS

.menuActive
{
     text-decoration:none;
color:yellow;
}
body {
    font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
    font-size:13px;
}
a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}
.nav {
    width:940px;
    margin:0 auto;
    margin-left:230px;
    height:20px;
}
.nav li {
    list-style:none;
    position:relative;
}
.nav > li {
    display:inline-block;
    font-size:13px;
    color:#687074;
    /* min-width:160px;*/
}
.nav > li > a {
    padding:5px 10px 10px 10px;
    color:#687074;
    display:block;
    text-align:center;
}
.nav li:hover > a {
    color:#f00;
    transition: 0.1s background ease;
}
.nav > li > a:hover {
    padding:5px 10px 10px 10px;
    color:#444!important;
    display:block;
    text-align:center;
    border-left:0px solid #444;
    border-right:0px solid #444;
    border-top:0px solid #444;
}
.nav li:hover {
    /*background:#028F41;*/
}
/*.nav ul li a:hover .media-caption
{
	display:block;
}*/
 .nav li:hover .dropdown {
    display:block;
}
.dropdown {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    color:#fff;
    /* min-width:160px;*/
    background-image:url("http://images.wikia.com/merlin1/images/4/4e/Transparent_background.png");
    /*  background:#028F41;*/
    border-left:0px solid #008438;
    border-right:0px solid #008438;
    border-bottom:0px solid #008438;
    border-top:0px solid #008438;
}
.dropdown.has-panel {
    width:600px;
}
.dropdown > ul {
    width:160px;
    margin:10px 0;
}
.dropdown > ul > li {
    position:static;
    font-size:12px;
}
.dropdown > ul > li > a {
    font-weight:normal;
    text-transform:none;
}
.dropdown-last {
    left:auto;
    right:0;
}
.dropdown-last > ul {
    float:right;
}
.dropdown li > a {
    color:#fff;
    padding:3px 5px;
    display:block;
}
.dropdown li > a:hover {
    background:#008438;
}
.dropdown li {
    color:#fff;
    border-bottom:1px solid #008438;
    display:block;
}
.dropdown li:last-child {
   ...

JavaScript

$(document).ready(function () {
    $(".nav").on("mouseenter", " > li", function () {
        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
        if ($(this).find(".dropdown").hasClass("has-panel")) {
            $(this).find(".triangle").css("display", "block");
        } else {
            $(this).find(".dropdown").removeClass("dropdown-last");
            $(this).find(".triangle").css("display", "none");
        }
        //alert($(this).parent().find(">:first-child").html())
        //$(this).find(">:first-child").find( ".dd-panel" ).css( "display", "block" );
        $(".dropdown li:first-child .dd-panel", $(this)).css("display", "block");
        $(".dropdown li:first-child .dd-panel", $(this)).addClass("active");

    });

$(".dd-panel").hover(function() {
    $(this).closest("a").toggleClass("menuActive")
});

    $(".dropdown").on("mouseenter", "ul li", function () {
        var $this = $(this);
        $this.parent().find(".active").css("display", "none");
        $this.find(".dd-panel").css("display", "block");

        // "+20" and "+30" are here to take into account padding and margins.
        // Instead of hard coding them, you could maybe compute them from the css ...
        var ulHeight = $this.parent().height() + 20;
        var captionHeight = $(this).find('.media-caption').height() + 30;
        var height = Math.max(ulHeight, captionHeight);
        $this.closest('.dropdown').height(height);
    });

    $(".dropdown").on("mouseleave", "ul li", function () {
        $(this).find(".dd-panel").css("display", "none");
        $(this).parent().find(".active").css("display", "block");
    });

    //$(".dropdown").on("mouseleave", " > li", function(){
    //$(this).find( ".media-caption:first" ).css( "display", "block" );
    //});

    $(".dropdown").on("mouseenter",...