How to set row height in jfxlistview according to line numbers and add vertical ellipses in at top right corner?

Question

I am making a name list which contain few lines in a single row using jfxlistview and when click a row the data in that row shows the info of the selected name. Now I managed to do that part but i have faced a prob if the info of the selected name is too long my list wont show all info how do I do it?

This is what i did so far:

 for (int i = 0; i < 10; i++) {
        TextFlow tf = new TextFlow();
        Text t1 = new Text("Item " + i + "\n");
        t1.setStyle("-fx-font-weight: bold;");
        Text t2 = new Text("Description: Blah Blah");
        tf.getChildren().addAll(t1, t2);
        myList.getItems().add(tf);

    }

I have add a mouse event that shows my info:

TextFlow tf = new TextFlow();
    Text t1 = new Text("Item \n");
    t1.setStyle("-fx-font-weight: bold;");

    Text t2 = new Text("Description: Blah Blah  \n");
    t2.setStyle("-fx-font-family: LATO");
    tf.getChildren().add(t1);
    int x = 0;

    for (int i = 0; i < 5; i++) {
        Text t3 = new Text("Description: ITEM: " + i + " \n");
        tf.getChildren().add(t3);
        x++;
    }

    ctrl = new Label("");
    ctrl.setStyle("-fx-font-family: flaticon; -fx-alignment: TOP_RIGHT;");
    tf.getChildren().add(ctrl);
    int height = x * 20;

    myList.getItems().set(myList.getSelectionModel().getSelectedIndex(), tf);
    myList.setStyle(".jfx-list-cell:selected{-fx-cell-size: " + height + "px}");

when I click it shows like this:

but the way i did the row height won't change.. and i wanna add a vertical ellipse to the right top corner which has a mouse click even that i can edit the info:

any idea how can i do that? it would be great if i can resize the row height with an animation. thanks in advance. PS: Rippler effect also not working when i use an Object to jfxlistview